css浮動

浮動

浮動的設計初衷
一、浮動能將一個元素（一般是一張圖片）拉到其容器的一側，這樣文檔流就可以包圍它（以下圖所示）。這種佈局在報紙和雜誌中很常見，所以CSS增長了浮動來實現這種效果。

文本行包圍了浮動元素

二、浮動元素會被移出正常文檔流，並被拉到容器邊緣。文檔流會從新排列，可是它會包圍浮動元素此刻所佔據的空間。若是讓多個元素向同側浮動，它們就會挨着排列，

兩個浮動元素挨着排列

注意點

1. 動元素不一樣於普通文檔流的元素，它們的高度不會加到父元素上
2. 浮動是爲了實現文字圍繞浮動元素排列的效果。在段落裏浮動圖片時，段落的高度並不會增加到可以容納該圖片。也就是說，若是圖片比段落文字高，下一段會直接從上一段的文字下面開始，兩段文字都會圍繞浮動的圖片排列（下圖1）
3.  三個左浮動的盒子：若是盒子1比盒子2高，則盒子3不會浮動到最左邊，而是浮動到盒子1的右邊（下圖2）

下圖1

下圖2

塊級格式化上下文（blockformatting context, BFC）

特色

1. 包含了內部全部元素的上下外邊距。它們不會跟BFC外面的元素產生外邊距摺疊。
2. 包含了內部全部的浮動元素。
3. 不會跟BFC外面的浮動元素重疊。

簡而言之，BFC裏的內容不會跟外部的元素重疊或者相互影響。若是給元素增長clear屬性，它只會清除自身所在BFC內的浮動。若是強制給一個元素生成一個新的BFC，它不會跟其餘BFC重疊。

建立BFC

1. float: left或right，不爲none便可。
2. overflow:hidden、auto或scroll，不爲visible便可。
3. display:inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。擁有這些屬性的元素稱爲塊級容器（block container）。
4. position:absolute或position: fixed。

好處

1. 包含浮動元素
2. 防止外邊距摺疊
3. 防止文檔流圍繞浮動元素排列