清除浮動的幾種方式及其原理

任雨前行發表於2021-03-06

首先：為什麼要清除浮動？

清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0造成塌陷的問題。

（1）父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優點：簡單、程式碼少、容易掌握

缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

（2）父級div定義 overflow:hidden/auto

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden/auto時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、程式碼少、瀏覽器支援好；

缺點：overflow:hidde內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢位的元素；overflow:auto內容增多可能出現滾動條（不推薦使用）；

 

<style>

        .father {

            width: 400px;

            overflow: hidden;

        }

        .big {

            width: 200px;

            height: 200px;

            float: left;

            background-color: aqua;

        }

        .small {

            width: 100px;

            height: 100px;

            float: left;

            background-color: #ccc;

        }

    </style>

    <div class="father">

        <div class="big"></div>

        <div class="small"></div>

    </div>

 

（3）結尾處加空div標籤 clear:both

原理：新增一個空div，利用css提供的clear:both清除浮動，讓父級div自動檢測子盒子最高的高度，然後與其同高（本質就是閉合浮動，就是讓父盒子閉合出口和入口，不讓子盒子出來）。

優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好（新增無意義標籤，語義化差，所以不建議使用。）。

 

<style>

        .father {

            width: 400px;

        }

        .big {

            width: 200px;

            height: 200px;

            float: left;

            background-color: aqua;

        }

        .small {

            width: 100px;

            height: 100px;

            float: left;

            background-color: #ccc;

        }

        .clear {

            clear: both;

        }

    </style>

 

    <div class="father">

        <div class="big"></div>

        <div class="small"></div>

        <div class="clear"></div>

</div>

 

（4）偽類元素:after清除浮動（推薦使用）

原理：其本質與新增空div標籤是一樣的，都是新增一個不可見但佔位置的塊級元素，然後清除掉所有的浮動；

優點：符合閉合浮動思想，結構語義化正確

缺點：ie6-7不支援偽元素：after，使用zoom:1觸發hasLayout。

 

<style>

        .father {

            width: 400px;

        }

        .big {

            width: 200px;

            height: 200px;

            float: left;

            background-color: aqua;

        }

        .small {

            width: 100px;

            height: 100px;

            float: left;

            background-color: #ccc;

        }

 

        /* 使用偽類元素清除浮動:偽元素是行內元素 正常瀏覽器清除浮動方法 */

        .clearFix::after { 

            content:"";

            display: block;

            height: 0;

            visibility: hidden;

            clear: both;

        }

        /* ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行 */

        .clearFix {

            zoom: 1;

        }

    </style>

 

    <div class="father clearFix">

        <div class="big"></div>

        <div class="small"></div>

        <!-- <div class="clear"></div> -->

    </div>

 

（5）雙偽類元素:after和:before清除浮動（推薦使用）

原理與單偽元素清除浮動一樣；

 

<style>

        .father {

            width: 400px;

        }

        .big {

            width: 200px;

            height: 200px;

            float: left;

            background-color: aqua;

        }

        .small {

            width: 100px;

            height: 100px;

            float: left;

            background-color: #ccc;

        }

        /* 使用：after和:before雙偽元素清除浮動 */

        .clearFix::after,.clearFix::before {

            content: "";

            display: table;

        }

        .clearFix::after {

            clear: both;

        }

        .clearFix {

            *zoom: 1;

        }

    </style>

 

    <div class="father clearFix">

        <div class="big"></div>

        <div class="small"></div>

        <!-- <div class="clear"></div> -->

</div>

 

效果展示：

清除浮動前：

 

 

清除浮動後：

 

相關文章