CSS布局之浮動布局

布局(layout),指各個元素在網頁里如何擺放以形成最終的頁面,默認布局是從左到右、從上到下。改變元素的默認布局方式有很多種，浮動(float)就是其中一種。

1. 浮動(float)

浮動類似於word里面文字圍繞圖片的效果，可設置為向左(left)或向右(right)浮動。

// 元素默認沒有浮動效果
float: none;
// 向左浮動
float: left;
// 向右浮動
float: right;

1.1 浮動元素的盒模型

普通元素有文檔流(即上面提到的默認布局)，浮動元素頁游浮動流，即浮動元素會跟隨浮動元素浮動。

// 1.寬度和高度
浮動元素的寬高由內容撐開
// 2.內邊距
浮動元素可正常設置內邊距
// 3.邊框
浮動元素可正常設置邊框
// 4. 外邊距
浮動元素可正常設置外邊距，且外邊距不會重疊。

1.1 包含塊的包裹性

距浮動元素最近的塊級元素稱為包含塊，浮動元素不會超出包含快的上、右、左邊界，但可以超出元素的下邊界。

// 包含塊也浮動時，包含塊的寬度和高度由子元素撐開

想讓浮動元素超出父元素邊界有2中辦法：1.浮動元素寬度大於父元素寬度；2. 浮動元素設置負外邊距，但會與其他正常元素重疊。

// 如果浮動元素設置負外邊距，與其他元素重疊時會有如下情況：

// 1. 浮動元素與行內元素重疊：
行內元素的邊框、背景和內容，都在浮動元素之上
// 2. 浮動元素與塊級元素重疊
塊級元素的邊框、背景在浮動元素之下，內容在浮動元素之上

1.3 浮動元素的破壞性

浮動元素會造成父元素的高度塌陷，即當只有1個浮動元素且父元素未設置高度時，父元素的高度為0；

解決父元素的高度塌陷就要清除浮動，有2種辦法：

1.3.1 在浮動元素后，添加新元素並設置clear屬性

// 直接設置新元素清除浮動
.clear { clear: both; }
// 使用after偽類
.clear::after { 
    content: '';
    display: block;
    clear: both; 
}

1.3.2 觸發包含塊的BFC

// 設置float屬性為left或right
.fl { float: left; }
// 設置position屬性為fixed或absolute
.fx { position: fixed; }
// 設置display屬性為inline-block/table-cell/table-caption/flex
.hd { display: flex; }
// 設置overflow屬性不為visible
.ov { overflow: hidden; }