1

I have a div and an image inside it

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

img {
    float: left;
}

I can see the div have collapsed, the height have become to 0, my first question is, but the image is inside the, cuz the div's height is 0,why the image still can be see?

I know the solution like give the div a overflow property, even to auto. But why it can solve the problem?

4

2 回答 2

1

浮动元素不会影响父元素的大小。由于div唯一包含浮动元素，因此没有任何东西可以赋予它高度。

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

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

在父元素上使用的另一种方法是在另一个overflow元素之后添加一个非浮动子元素，并在其上使用clear: both;，使其位于浮动子元素的下方。这样，由于最后一个非浮动孩子，父母将包含孩子。

于 2013-05-07T08:09:27.733 回答
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”选项。

于 2013-05-07T08:10:33.477 回答