# 浮動與清除浮動

浮動與清除浮動

浮動佈局是一種常見的佈局方式，最初的使用目的是進行圖文的混排

這篇文章對浮動佈局進行簡單的總結，包括以下內容：

• 浮動
  • 單個浮動元素
  • 多個浮動元素
  • 父子元素
• 清除浮動
• 浮動的使用場景

浮動

浮動通過css定義：

#div1{
    float:left;
}

浮動可以取的值：none（默認）|left|right

當元素進行左浮動或者右浮動之後會脫離文檔流，並且構成一個浮動流，會覆蓋在沒有浮動的元素上，並且允許文本和內聯元素環繞在它周圍；浮動元素不會超出父元素的上、左、右邊界：

<div class="parent">
    <div class="bro1">第一個沒有設置浮動的block</div>
    <div class="bro2">浮動block，寬度收縮</div>
    <div class="bro3">被覆蓋block,文本被擠開</div>
</div>

.parent {
    width: 300px;
    margin: 0 auto;
    background: #999;
}
.bro1,.bro2 {
    height: 80px;
}
.bro1 {background: lightsalmon;}
.bro2 {
    float: left;
    background: lightcoral;
}
.bro3 {
    height: 100px;
    background: lightblue;
}

通過這個例子我們可以看出，當元素設置爲浮動元素的時候會產生下列影響：

• 浮動元素寬度默認爲內容的寬度
• 向指定的浮動方向一直移動
• 對它之前的block沒有影響
• 會掩蓋後面的block元素，但是不會遮蓋其中的文本和內聯元素

多個浮動元素

當同一個父元素下存在多個浮動的子元素的時候，這些子元素按照浮動流排布:

• 多個浮動元素不會相互重疊
• 浮動元素按照在父元素中的書寫順序，從上至下排布
• 當同一行有空間的時候，不管左浮動還是右浮動，都優先在同一行排列
• 當同一行沒有空間，後續浮動元素會從上至下尋找空間
• 浮動元素的上下左右margin不會發生重疊合並

下面的例子中，.left表示左浮動，大小70px/40px；外邊距10px.right表示右浮動；大小100px/100px 外邊距10px

<div class="parent">
    父元素width：600px;
    <div class="bro1">bro1不浮動的block元素</div>
    <div class="left">1</div>
    <div class="left">2</div>
    <div class="right">3</div>
    <div class="right">4</div>
    <div class="left">5</div>
    <div class="right">6</div>
</div>

(讀者可以寫一個類似的demo來感受一下,改變parent元素的寬度會有很多不同的排列效果)

父子元素

這一點主要是指，當子元素浮動的時候可能會發生父元素高度塌陷的情況

<div class="parent">
    <div class="left">浮動元素</div>
</div>

.parent {
    width: 400px;
    margin: 0 auto;
    background: #999;
}
.left {
    width: 70px;
    height: 40px;
    float: left;
    background: lightcoral;
}

這個現象往往會造成不好的影響，我們需要通過清除浮動解決

清除浮動

浮動的清除有兩種主要方案：

• 下一個元素具有clear屬性
• 父元素形成BFC

clear

clear屬性可以取值：none（默認）|left|right|both

分別表示：不清除浮動|清除左浮動|清除右浮動|全部清除

具體效果看例子：

<div class="parent">
    <div class="left">1</div>
    <div class="right">2</div>
    <div class="bro"></div>
</div>

.parent {
    width: 300px;
    margin: 0 auto;
    background: #999;}
.left {
    width: 70px;
    height: 40px;
    float: left;
    background: lightcoral;}
.right {
    float: right;
    margin: 10px;
    width: 100px;
    height: 100px;
    background: lightblue;
}
.bro {
    height: 40px;
    margin-top: 10;
    background: lightsalmon; }

接下來爲bro設置clear屬性，表現如下

我們可以注意到：

• float:left;的元素不再覆蓋clear:left;的元素，right同理
• float:right;的元素和clear:left;的元素髮生了margin合併，left同理
• 父元素被撐開了

由此我們得到一種避免父元素高度塌陷的方法——在末尾添加一個清除浮動元素，除了可以添加實際的html標籤之外，我們也可以通過僞元素來解決，給父元素添加這樣一個類：

.clear:after{
    content:""; 
    display: block; 
    clear: both;}

通過BFC

BFC（塊級格式化上下文）

BFC究竟是什麼含義，讀者可以自行搜索，或者在我左邊的文章列表裏找一找（希望你看到這裏時我更新了關於BFC的文章）

我們可以將浮動元素的父元素進行如下設置中的任意一個：

• float: left/right
• position:absolute/fixed
• display:inline-block/table-cell/table-caption/flex
• overflow:hidden/scroll/auto

我個人建議使用overflow:hidden;，相比於其他選擇，這個方法的副作用最小