如果容器元素包含浮动元素，为什么它的高度不增加？
如果容器元素包含浮动元素，为什么它的高度不增加？
我想问一下，高度和浮子是如何工作的。我有一个外部的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>
Qyouu浏览 658回答 3
3回答
-
FFIVE
你需要添加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示例 -
慕桂英3389331
您正遇到浮点错误(但我不确定它在技术上是否是一个错误，因为有多少浏览器显示了这种行为)。下面是正在发生的事情：在正常情况下，假设未设置显式高度，块级元素(如div)将根据其内容设置其高度。父div的底部将扩展到最后一个元素之外。不幸的是，浮动元素阻止父元素在确定其高度时考虑到浮动元素。这意味着，如果最后一个元素被浮动，它将不会像普通元素那样“拉伸”父元素。清清有两种常见的方法来解决这个问题。第一种方法是添加一个“清除”元素，即浮动元素下面的另一个元素，它将迫使父元素拉伸。因此，添加以下html作为最后一个子程序：<div style="clear:both"></div>它不应该是可见的，通过使用CLEAR：两种方法，您都要确保它不会坐在浮动元素的旁边，而是在它之后。溢出：第二种方法是更改父元素的CSS，使溢出不再是“可见的”，这是大多数人(我认为)喜欢的方法。因此，将溢出设置为“隐藏”将迫使父级扩展到浮动子节点的底部之外。当然，只有在没有为父级设置高度的情况下，这才是正确的。就像我说的，第二种方法是首选的，因为它不需要向标记中添加语义上无意义的元素，但有时需要overflow要使其可见，在这种情况下添加一个清除元素是完全可以接受的。
随时随地看视频慕课网APP
Html/CSS
Html5
CSS3