前端開(kāi)發(fā)中浮動(dòng)處處可見(jiàn)忍些，本文探討浮動(dòng)的成因以及如何更加有效的清除浮動(dòng)滞项。

1、浮動(dòng)與清除浮動(dòng)

浮動(dòng)溢出

“理想狀態(tài)” - 合理的清除浮動(dòng)后

2弓乙、清除浮動(dòng)

基本css樣式

.box {
    width: 400px;
    border: 1px solid #ff721b;
}
[class*='pull-'] {
    width: 100px;
    height: 100px;
    background-color: #00A8FF;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}

2.1 在容器內(nèi)部使用塊級(jí)元素的clear: both清除浮動(dòng)

（1）通過(guò)在浮動(dòng)元素后的塊級(jí)元素設(shè)置clear: both;來(lái)清除其之前的浮動(dòng)末融。

css樣式：

.clearfix2 {
    clear: both;
}

示例1：

<div class="box">
    <div class="pull-left"></div>
    <p class="clearfix2"></p>
    <div class="pull-right"></div>
    <p class="clearfix2"></p>
</div>

示例2：

<div class="box">
    <div class="pull-left"></div>
    <div class="pull-right"></div>
    <p class="clearfix2"></p>
</div

.clearfix4::after {
    display: block; /*table巧婶、flex也可以*/
    height: 0; /*可不寫*/
    visibility: hidden; /*可不寫*/
    content: '';
    clear: both;
}

<div class="box clearfix4">
    <div class="pull-left"></div>
    <div class="pull-right"></div>
</div>

2.2 利用BFC特性

BFC（Block Formatting Context），塊級(jí)格式化上下文涂乌，它規(guī)定了內(nèi)部的塊級(jí)元素的布局方式艺栈，默認(rèn)情況下只有根元素（即body）一個(gè)塊級(jí)上下文。

1. BFC布局規(guī)則

• 內(nèi)部的塊級(jí)元素會(huì)在垂直方向湾盒，一個(gè)接一個(gè)地放置湿右；
• 塊級(jí)元素垂直方向的距離由margin決定（margin合并）；
• 每個(gè)元素的margin box的左邊罚勾，與包含border box的左邊相接觸（對(duì)于從左往右的格式化毅人，否則相反）。即使存在浮動(dòng)也是如此尖殃；
• BFC的區(qū)域不會(huì)與float box重疊丈莺；
• BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素送丰；外面的元素也不會(huì)影響到容器里面的子元素缔俄；*
• 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算器躏。

2. 創(chuàng)建一個(gè)BFC

• float的值不為none俐载；
• overflow的值不為visible；
• position的值為fixed / absolute登失；
• display的值為table-cell / table-caption / inline-block / flex / inline-flex遏佣。
  只需滿足以上條件之一，一個(gè)BFC就可以被顯式觸發(fā)壁畸。

示例：以設(shè)置overflow：auto;為例（其它屬性設(shè)置后會(huì)有一些影響-脫離文檔流）

.clearfix1 {
    overflow: auto; /*hidden也可以*/
}

<div class="box clearfix1">
    <div class="pull-left"></div>
    <div class="pull-right"></div>
</div>

2.3 讓容器也浮動(dòng)

讓容器一起浮動(dòng)贼急，也能不受內(nèi)部元素的浮動(dòng)影響。這個(gè)方法要小心使用捏萍。

3太抓、參考文章

• 為什么"overflow:hidden"能清除浮動(dòng)的影響；