混淆css浮动

我有一个div和一个图像在里面

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

img {
    float: left;
}

img{
浮动：左；
}

我可以看到

div

已经塌陷，高度已经变为0， 我的第一个问题是，但是图像在内部，因为div的高度是0，为什么图像仍然可以看到

---

我知道解决方法，比如给div a

overflow

属性，甚至给

auto

。但是为什么它可以解决这个问题呢？

浮动元素不会影响父元素的大小。由于

div

只包含浮动元素，因此没有任何元素赋予它高度

通过在父元素上设置

溢出

样式（除了

可见

），可以强制它包含其元素，以便可以滚动它们

通过不在父元素上设置特定的大小，它将从其子元素获得大小，而您不会获得滚动条。由于现在包含了子元素，浮动元素将影响父元素的大小

---

在父元素上使用

overflow

的替代方法是在另一个元素之后添加一个非浮动子元素，并使用

clear:both在其上，使其位于浮动子对象下方。这样，由于最后一个非浮动子元素，父元素将包含子元素。
默认情况下，父元素不会环绕浮动内容。（如果它这样做了，在很多情况下都会很烦人。）因此，如果您希望它这样做，则需要强制容器将浮动元素封装起来<代码>溢出：隐藏是一种方法，尽管它并不总是可行的解决方案。还有很多其他的方法，比如“clearfix”方法

overflow
属性用于包含浮点数，因为要遵守规则，包含元素必须“查看”其中的内容。通常，浮动内容在文档流之外，大部分被其他元素忽略

以下是该分区的一些其他包含选项：

“clearfix”方法：

漂浮容器：

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

使用
显示：表格
：

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

使用
显示：内联块
：

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

使用
位置：绝对：

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

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

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