CSS清除浮動總結

下面介紹一下小白實作清除浮動的三個思路：

1. 使用僞類清除浮動
2. 給父元素添加一個空白元素，再對這個元素清除浮動
3. 制造BFC

第一種思路：給需要清除浮動的元素添加一個after僞類，然後對僞類清除浮動，舉個栗子：

<div class="clearfix">
    <img class="img1" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
    <img class="img2" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
</div>
<style>
    .clearfix {background: red;}
    .clearfix:after {content: ''; display: block; clear: both;}
    .img1 {float: left;}
    .img2 {float: right;}
</style>
           

 以上代碼對.clearfix類添加一個after僞類，然後對這個僞類清除浮動，清除浮動的核心代碼就是：content: ' '; display: block; clear: both（劃重點^*^）

第二種思路：在需要清除浮動的元素末尾添加一個清除浮動的空塊級子元素，舉個栗子：

<div class="outer">
    <img class="img1" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
    <img class="img2" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />  
    <div class="clearfix"></div>
</div>
<style>
    .outer {background: red;}
    .clearfix {clear: both;}
    .img1 {float: left;}
    .img2 {float: right;}
</style>
           

在上面的這段代碼中，圖檔分别進行左右浮動，然後在.outer元素最後添加一個清除浮動的空塊級子元素，這樣也能實作清除浮動。

第三種思路：建立BFC（Block Fromatting Context），即塊級格式化上下文，BFC是一種特殊的容器，這種容器有一個特性就是容器内部的内容和外部的内容互不影響，借助這個原理，把浮動元素放在這種容器内部讓浮動元素和容器外部元素互不影響，進而實作清除浮動的效果。下面首先介紹一下生成BFC的方法4種方法：

1. 将元素設定為浮動
2. 将元素設定為絕對定位
3. 将元素的overflow屬性設定為非visible值，例如hidden、auto
4. 将元素的display屬性inline-block、table-cell、flex、table-caption、inline-flex中的任意一個

隻要元素滿足以上任意一種條件就會生成BFC，小白在用overflow: auto舉個栗子：

<div class="clearfix">
    <img class="img1" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
    <img class="img2" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
</div>
<style>
    .clearfix {overflow: auto; background: red;}
    .img1 {float: left;}
    .img2 {float: right;}
</style>
           

以上代碼把.clearfix元素的overflow屬性設定為auto，這樣就使.clearfix元素生成了BFC，進而消除浮動元素對BFC外部元素造成的影響。

總結：大家在測試的過程中可能會發現紅色的背景，這是需要清除浮動的元素的背景顔色，紅色出現則說明清除浮動成功，因為如果清除浮動失敗的話，元素的高度會為0，不顯示紅色背景。