混淆关于CSS的float

Question

我有一个div和图像里面

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

img { 
    float: left; 
} 

我可以看到div已经崩溃，高度已成为0， 我的第一个问题是，但图像是内部的，因为div的高度是0，为什么图像仍然可以看到？

我知道解决方案喜欢给一个overflow财产，甚至auto。但为什么它可以解决问题？

Answer 1

默认情况下，父元素不会环绕浮动内容。 （如果它确实如此，这在很多情况下会很麻烦。）因此，如果您希望这样做，您需要强制容器包含浮动元素。 overflow: hidden;是这样做的一种方式，但它并不总是一个可行的解决方案。还有其他一些方法，比如“clearfix”方法。

overflow属性用于包含浮动，因为遵守规则，包含元素必须“看看”里面的内容。通常情况下，浮动内容是在文档流之外进行的，并且大部分被其他元素忽略。

下面是该div其它一些遏制选项：

的 “clearfix” 的方法：

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

浮动容器：

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

使用display: table：

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

使用display: inline-block：

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

使用position: absolute;：

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

有些人比其他人更有用，和背景将决定是，不以任何特定布局为宜。通常，我坚持使用overflow: hidden，除非某些内容需要挂出包含的元素（例如在下拉菜单中），在这种情况下，我通常会使用“clearfix”选项。

Answer 2

浮动元素不会影响父元素的大小。由于div只包含浮动元素，因此没有任何东西给它高度。

通过在父元素上设置overflow样式（除visible之外的任何其他样式），您强制它包含其元素，以便它们可以滚动。

通过不在父元素上设置特定大小，它将从其子元素中获取大小，并且不会获得滚动条。由于孩子现在被包含，浮动元素将影响父母的大小。

在父元素上使用overflow的另一种方法是将非浮动子项添加到另一个子元素上，并使用clear: both;以使其位于浮动子元素下方。这样父母将会因为最后一个不流动的孩子而包含孩子。