css - 对 css float 感到困惑

Question

里面有一个div和一个图片

<div>
    <img src="logo.png">
</div>

img {
    float: left;
}

我可以看到 div 折叠了，高度变成了 0，我的第一个问题是，但是图像在里面，因为div的高度是0，为什么图像仍然可以看到？

我知道解决方案，比如给 div 一个 overflow 属性，甚至是 auto。但为什么能解决问题呢？

Answer 1

默认情况下，父元素不会环绕 float 内容。 (如果它这样做，在很多情况下会很烦人。)所以如果你想让它这样做，你需要强制容器包围 float 元素。 overflow: hidden; 是实现它的一种方法，尽管它并不总是可行的解决方案。还有很多其他方法可以做到这一点，例如“clearfix”方法。

overflow 属性用于包含 float ，因为为了遵守规则，包含元素必须“查看”其中的内容。通常， float 内容被带到文档流之外，并且大部分被其他元素忽略。

以下是该 div 的其他一些包含选项:

“clearfix”方法:

div:after {
    content:"";
    display:table;
    clear:both;
}

float 容器:

div.contain {
    float: left;
    width: 100%;
}

使用显示:表格:

div {
    display: table;
    width: 100%;
}

使用显示:内联 block :

div {
    display: inline-block;
    width: 100%;
}

使用 position: absolute;:

div {
    position: absolute;
    width: 100%;
}

其中一些比其他的更有用，上下文将决定在任何特定布局中哪些是合适的，哪些是不合适的。通常，我坚持使用 overflow: hidden 除非某些内容需要卡在包含元素之外(例如在下拉菜单中)，在这种情况下我通常会使用“clearfix”选项。