1.1為什么要清除浮動

image.png

由于父級盒子很多情況下，不方便給高度，但是滋賀子浮動又不占有位置，最后父級盒子高度為0時，就會影響下面的標(biāo)準(zhǔn)流盒子。

1.2清除浮動的本質(zhì)

• 清除浮動的本質(zhì)是清除浮動元素造成的影響
• 如果父盒子本身有高度，則不需要清除浮動
  -清楚浮動之后，父級就會根據(jù)浮動的滋賀子自動檢測高度。父級有了高度，就不會影響下面的標(biāo)準(zhǔn)流了。

1.3清除浮動

選擇器{clear:屬性值;}

• 實際開發(fā)過程中，幾乎只用clear:both

1.4清除浮動的方法

1、額外標(biāo)簽法也稱為隔墻法，是W3C推薦的做法。
2、父級添加overflow屬性
3、父級添加after偽元素
4、父級添加雙偽元素

1.41額外標(biāo)簽法

額外標(biāo)簽法會在浮動元素末尾添加一個空的標(biāo)簽。
在最后一個浮動盒子的后面新建一個盒子如下用于堵住浮動的盒子。

   .clear{
            clear:both;
            }

  <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>

優(yōu)點(diǎn)：通俗易懂，方便書寫
缺點(diǎn)：添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差
注意：要求這個新的空標(biāo)簽必須是塊級元素（如：span就不行）

1.42 父級添加overflow

可以給父級添加overflow，將其屬性值設(shè)置為hidden、auto或scroll。
優(yōu)點(diǎn)：代碼簡潔
缺點(diǎn)：無法顯示溢出部分

1.43 ：after偽元素法

:after方式是額外標(biāo)簽法的升級版，也是給父元素添加。在css中增加如下為元素，之后在父元素增加clearfix標(biāo)簽。

       .clearfix:after{
               content:"";
               display:block;
               height:0;
               clear:both;
               visibility:hidden;
         }
       /*IE6、7專有*/
       .clearfix{
             *zoom:1;
            }

優(yōu)點(diǎn)：沒有增加標(biāo)簽，結(jié)構(gòu)更簡單
缺點(diǎn)：照顧低版本瀏覽器
代表網(wǎng)站：百度、淘寶網(wǎng)、網(wǎng)易等

1.44：雙偽元素清除浮動

也是給父元素添加

.clearfix:before,
        .clearfix:after{
            content:"";
            display:table;
        }
        .clearfix:after{
            clear:both;
        }
        .claerfix{
            *zoom:1;
        }

優(yōu)點(diǎn)：代碼更簡潔
缺點(diǎn)：照顧低版本瀏覽器
代表網(wǎng)站：小米、騰訊等