html - 为什么添加 float :left/right to my CSS moves another div to the top?

Question

期望的行为:餐厅的中心图像水平居中，margin-top 为 100px。

具体问题:当我将 float 属性添加到左右图像(箭头和放大镜)时，中心图像一直移动到其容器的顶部。

复制者:这是我的 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

这是由于“边缘收缩”(您可以通过谷歌搜索了解详细信息...):.restaurant img 的顶部边缘与 .restaurant- 的边缘“合并”小部件，从而在容器的外部产生边距。

为避免这种情况，您可以将 padding-top: 1px 添加到容器 (.restaurant-widget)