如果容器元素包含浮动元素，为什么它的高度不增加？

如果容器元素包含浮动元素，为什么它的高度不增加？我想问一下，高度和浮子是如何工作的。我有一个外部的div和一个有内容的内部div。它的高度可能会根据内部div的内容而变化，但我的内部div似乎会溢出它的外部div。怎样才是正确的方法呢？ <html> <body> <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange"> <div style="width:500px; height:200px; background-color:black; float:right"></div> </div> </body></html>

查看完整描述

3 回答

FFIVE

TA贡献1797条经验获得超6个赞

你需要添加overflow:auto对于您的父div，它包含内部浮动div：

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div></div>

jsFiddle示例

反对回复 2019-06-05

慕桂英3389331

TA贡献2036条经验获得超8个赞

您正遇到浮点错误(但我不确定它在技术上是否是一个错误，因为有多少浏览器显示了这种行为)。下面是正在发生的事情：

在正常情况下，假设未设置显式高度，块级元素(如div)将根据其内容设置其高度。父div的底部将扩展到最后一个元素之外。不幸的是，浮动元素阻止父元素在确定其高度时考虑到浮动元素。这意味着，如果最后一个元素被浮动，它将不会像普通元素那样“拉伸”父元素。

清清

有两种常见的方法来解决这个问题。第一种方法是添加一个“清除”元素，即浮动元素下面的另一个元素，它将迫使父元素拉伸。因此，添加以下html作为最后一个子程序：

<div style="clear:both"></div>

它不应该是可见的，通过使用CLEAR：两种方法，您都要确保它不会坐在浮动元素的旁边，而是在它之后。

溢出：

第二种方法是更改父元素的CSS，使溢出不再是“可见的”，这是大多数人(我认为)喜欢的方法。因此，将溢出设置为“隐藏”将迫使父级扩展到浮动子节点的底部之外。当然，只有在没有为父级设置高度的情况下，这才是正确的。

就像我说的，第二种方法是首选的，因为它不需要向标记中添加语义上无意义的元素，但有时需要overflow要使其可见，在这种情况下添加一个清除元素是完全可以接受的。

反对回复 2019-06-05

如果容器元素包含浮动元素，为什么它的高度不增加？

如果容器元素包含浮动元素，为什么它的高度不增加？

3 回答

相关问题推荐

添加回答

热搜

最近搜索清空

如果容器元素包含浮动元素，为什么它的高度不增加？

如果容器元素包含浮动元素，为什么它的高度不增加？

3 回答

相关问题推荐

添加回答