clear-fix清除浮動(dòng)的寫法有哪些

小億
155
2023-10-18 16:31:08
欄目: 編程語言

清除浮動(dòng)是為了解決父元素因?yàn)樽釉馗?dòng)而導(dǎo)致高度塌陷的問題。以下是幾種常用的清除浮動(dòng)的寫法：

1. 使用空的clear-fix元素：

   .clearfix::after {
     content: "";
     display: table;
     clear: both;
   }

然后在包含浮動(dòng)元素的父元素上添加.clearfix類。

2. 使用overflow屬性：

   .parent {
     overflow: auto;
   }

這會(huì)觸發(fā)BFC（塊級(jí)格式化上下文），從而自動(dòng)清除浮動(dòng)。

3. 使用clearfix類選擇器：

   .clearfix:before,
   .clearfix:after {
     content: "";
     display: table;
   }
   .clearfix:after {
     clear: both;
   }
   .clearfix {
     zoom: 1; /* 兼容IE */
   }

然后在包含浮動(dòng)元素的父元素上添加.clearfix類。

這些方法中，第一種和第三種方式使用偽元素來插入一個(gè)空元素，通過設(shè)置clear: both將其放置在浮動(dòng)元素之后，從而清除浮動(dòng)。第二種方法利用overflow屬性來創(chuàng)建一個(gè)新的塊級(jí)格式化上下文，它會(huì)包裹住浮動(dòng)元素并自動(dòng)清除浮動(dòng)。根據(jù)具體情況，選擇其中一種方式即可。

0 踩