為什麼浮動元素會超出其父容器？

為什麼浮動元素會超出包含的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中文網其他相關文章！