为什么将 float:left/right 添加到我的 CSS 会将另一个 div 移动到顶部？

Question

Desired behavior: the center image of the restaurant to be centered horizontally, with a margin-top of 100px.

Specific problem: When I add the float property to the left and right images (the arrow and the magnifying glass), the center image moves all the way to the top of its container.

Reproducer: Here is a link to my CodePen: https://codepen.io/annabaker/pen/gObmWWx

HTML:

<div class="restaurant-widget">
    <div class="left-arrow">
        <img src="https://i.imgur.com/8T03wEO.png">
    </div>
    <div class="search">
        <img src="https://i.ibb.co/zQX1b7N/zoom-32.png">
    </div>
    <div class="restaurant">
       <img src="https://i.imgur.com/4FeEerb.jpg">
    </div>
    <div class="header">
        THE WATER CLUB
    </div>
</div>

CSS:

.restaurant-widget {
    color: #4c4c4c;
    box-shadow: 1px 1px 16px rgba(0,0,0,.58);
    border-radius:1px;
    /* this centers the actual widget itself, provided width is defined */
    margin: auto;
    width: 500px;
    height: 900px;
}

.left-arrow img {
    margin-top: 50px;
    margin-left: 50px;
    float: left;
 }

.search img {
    margin-top: 50px;
    margin-right: 50px;
    float: right;
 }

.restaurant img {
    /* this makesthe restaurant image circular */
    border-radius: 50%;
    border: 5px solid grey;
    box-shadow: 1px 1px 16px rgba(0,0,0,.58);
    display: block;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

That's due to "collapsing margins" (you can google that for details...): The top margin of .restaurant img is "merged" with the margin of .restaurant-widget , resulting in a margin outside of the container.

To avoid that, you can add padding-top: 1px to the container ( .restaurant-widget )

Answer 2

Everytime you use float , you remove the element from its normal flow in the page and put it in another context . You can imagine the floating element really "floating" above the elements in the basic context. As all HTML in a page is rendered line by line, the elements were been created everyone in its context (based on its display properties).

The positioning of you central image when the others are not floated occurs the way it occurs because of the fact that the other images are in the same context as the central image, and so central image occupy that spot. When you do apply float , you remove the other images from its context, so central image can now occupy a new spot on the page. About this topic of contexts, I recommend you a further reading here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

There are some ways to achieve what you want. CSS Flexbox and CSS Grid are, probably, the best and the simpler ways. I redid your code using CSS Grid, here's a Codepen: https://codepen.io/alac1984/pen/WNbpYmb