清除浮動的幾種方式--css基礎

清除浮動定義：指的是清除浮動的影響

使用場合：當子元素設定了浮動，父元素沒有高度的時候，會造成頁面布局混亂，這種情況下進行清除浮動。

清除浮動的幾種方式

方式1：使用 clear:left | right | both 等

操作：
在要清除浮動的元素後面添加一個類.clearfix的标簽
<div class="content">
     <div class="left"></div>
     <div class="right"></div>          
     <div class="clearfix"></div>
</div>

CSS設定
.clearfix{
    clear: both;
}
           

方式2：給父盒子設定 overflow: hidden（填充高度）

操作：CSS設定
.content {
    width: px;   
    background-color: pink;
    overflow: hidden;
}
           

說明：如果父盒子中有定位的元素，一般不推薦使用該種方式清除浮動。因為超出的部分就會被隐藏掉

方式3：使用僞元素清除浮動（較優化較友好）

操作：
html設定
<div class="content clearfix">
     <div class="left"></div>
     <div class="right"></div>              
</div>

CSS設定
.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: ;
    line-height: ;
    visibility: hidden;    /*  block隐藏掉 */
    clear: both;
}
.clearfix{
    zoom:;/*IE//*/
}   
           

方式4：使用僞元素清除浮動（優化友好）

操作：
html設定
<div class="content clearfix">
     <div class="left"></div>
     <div class="right"></div>              
</div>

CSS設定
/***清除浮動中最常用和最好用的方法——小米官網中用到了*/
/*雙僞元素 */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;   /*前後兩個盒子在一行上*/
} 
.clearfix:after{ clear:both; }    
.clearfix{
    zoom:;/*IE/7/6*/
}
           

方式5：使用bootstrap架構的輔助類.clearfix清除浮動（最官方 友好）

注意：首先得引入bootstrap的相關檔案

<div class="clearfix"></div>