為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式?

LuckXinXin發表於2020-12-28
  • 浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由於浮動元素不在文件流中,所以文件流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文件流的塊框上。

浮動帶來的問題:

  • 父元素的高度無法被撐開,影響與父元素同級的元素
  • 與浮動元素同級的非浮動元素(內聯元素)會跟隨其後
  • 若非第一個元素浮動,則該元素之前的元素也需要浮動,否則會影響頁面顯示的結構。

清除浮動的方式:

  • 父級div定義height
  • 最後一個浮動元素後加空div標籤 並新增樣式clear:both。
  • 包含浮動元素的父標籤新增樣式overflow為hidden或auto。
  • 父級div定義zoom

相關文章