为什么浮动元素会超出其父容器？

为什么浮动元素会超出包含的 Div

在 div 中，当元素被赋予浮动时，它们可以超出包含的 Div 的边界分区发生这种情况是因为浮动元素从文档的正常流中删除，导致它们定位在其他元素周围而不是相邻元素。因此，它们不会影响包含的 div 的宽度。

拉伸浮动项目的解决方案

1. Overflow:hidden

一个简单的解决方案是将overflow:hidden 添加到父div 中。这会强制隐藏所有超出父级边界的内容：

#parent { overflow: hidden }

2。浮动父 Div

另一个选项是浮动父 div：

#parent { float: left; width: 100% }

这使得父 div 表现得像浮动元素，允许浮动子元素影响其身高。

3。清除元素

使用清除元素也可以解决该问题：

<div class="parent">
  <img  class="floated_child lazy" src="/static/imghwm/default1.png" data-src="..." alt="为什么浮动元素会超出其父容器？" >
  <span class="clear"></span>
</div>

span.clear { clear: left; display: block; }

清除元素打破了浮动子元素的流动，将其推到底部父 div 的。

以上是为什么浮动元素会超出其父容器？的详细内容。更多信息请关注PHP中文网其他相关文章！