清除浮動的方法(6種)

2022-10-11 18:42:13 字數 326 閱讀 4471

方法1:增加標籤clear:both

增加標籤

方法2:增加標籤

增加標籤

方法3:父容器使用::after偽元素清除浮動

父容器div增加class="clearfix"

方法4:父容器overflow:hidden 或 父容器 auto(本質是用的bfc)什麼是bfc ===> 

父容器設定樣式overflow:hidden 或  auto

方法5:父容器設定display

父容器設定樣式display:table

方法6:父容器也浮動

父容器設定樣式float:left

清除浮動方法(6種)

浮動元素 float屬性 讓元素進行浮動 left 左浮動 right 右浮動 清除浮動元素屬性 clear屬性 清除浮動 left 在左側不允許浮動元素 right 在右側不允許浮動元素 both 在左 右兩側不允許浮動元素 none 預設值。允許浮動元素出現在兩側 為什麼要清除浮動 當子元素設定...

html清除浮動的6種方法示例

html清除浮動的6種方法示例 使用display inline block會出現的情況 1.使塊元素在一行顯示 2.使內嵌支援寬高 3.換行被解析了 4.不設定的時候寬度由內容撐開 5.在ie6,7下步支援塊標籤 由於inline block屬性換行的時候被解析 有間隙 故解決方法使用浮動floa...

清除浮動6中方法

使用display inline block會出現的情況 1.使塊元素在一行顯示 2.使內嵌支援寬高 3.換行被解析了 4.不設定的時候寬度由內容撐開 5.在ie6,7下步支援塊標籤 由於inline block屬性換行的時候被解析 有間隙 故解決方法使用浮動float left right 使用浮...