CSS盒模型之文件流與BFC
文件流：文件中可顯示的元素在排列時候的開始位置以及他們所佔的區域
原因：頁面元素不同，按照各自的特點去顯示，在頁面中所佔的區域是不一樣的
順序：從上到下，從左到右
css浮動float
概念：使元素脫離文件流，按照指定的方向發生移動，遇到父級元素或者相鄰的元素就會停下來
特徵：1）塊元素可以在一行顯示
2）按照一個方向移動
3）行內元素支援寬高
4）脫離文件流(元素不在頁面中佔位置了)
注意：浮動後跟的元素（沒有浮動）的位置是從前面浮動的元素位置開始的
非浮動元素裡的內容會留出前面浮動元素的位置（盒模型位置）
5）塊元素的預設寬度（預設撐滿一行）會改變（由內容撐開，也可以設定寬）
程式碼
1.container div { 2 width: 100px; 3 height: 100px; 4 background: green; 5 float: left; 6 }
<div class='container'> <div></div> <span>浮動後跟的元素（沒有浮動）的位置是從前面浮動的元素位置開始的 非浮動元素裡的內容會留出前面浮動元素的位置（盒模型位置） 浮動後跟的元素（沒有浮動）的位置是從前面浮動的元素位置開始的 非浮動元素裡的內容會留出前面浮動元素的位置（盒模型位置）浮動後跟的元素（沒有浮動）的位置是從前面浮動的元素位置開始的 非浮動元素裡的內容會留出前面浮動元素的位置（盒模型位置）浮動後跟的元素（沒有浮動）的位置是從前面浮動的元素位置開始的 非浮動元素裡的內容會留出前面浮動元素的位置（盒模型位置）浮動後跟的元素（沒有浮動）的位置是從前面浮動的元素位置開始的 非浮動元素裡的內容會留出前面浮動元素的位置（盒模型位置）浮動後跟的元素（沒有浮動）的位置是從前面浮動的元素位置開始的 非浮動元素裡的內容會留出前面浮動元素的位置（盒模型位置）浮動後跟的元素（沒有浮動）的位置是從前面浮動的元素位置開始的 非浮動元素裡的內容會留出前面浮動元素的位置（盒模型位置）</span>
結果：
6）父級高度塌陷（破壞性），子元素如果有浮動，父級高度不會自動撐開了
//css程式碼 .container { border:2px solid red; } .container div { width: 100px; height: 100px; /*float: left;*/ background: green; } //html程式碼 <div class='container'> <div></div> </div>
清除浮動
1） clear 元素的某個方向上不能有浮動元素
clear :left 元素的左邊不能有浮動元素
right 元素的右邊不能有浮動元素
both 元素的兩邊不能有浮動元素 （常用）
2）overflow:hidden
如果子級有定位（position）並且超出了父級的範圍這樣子級定位的內容就開不見了，就不能有這樣命令了
3）空標籤
空標籤是沒有內容的，但他用於清楚浮動，不符合行為、結構、樣式相分離
<div class='container'> <div class='box'></div> <div style='clear:both;'></div> </div>
4）after偽類清除浮動，是目前主流方法
after 代表選擇到的元素的內容的最後面（預設新增的內容是行內元素），配合content使用
content 設定的內容
CSS程式碼
.container { border: 2px solid red; } .container .box { width: 100px; height: 100px; float: left; background: green; } .clearfix:after { content: ''; display: block; clear: both; }
HTML程式碼
<div class='container clearfix'> <div class='box '></div>
</div>
執行結果
BFC Block Formatting Contexts 塊級元素格式化上下文
決定了塊級元素如何對它的內容進行佈局，及與其他元素的關係與相互作用
關鍵詞解釋：塊級元素：指的是父級（塊級元素）
內容：子元素（塊級元素）
其他元素：與內容級別的兄弟元素
相互作用：BFC裡的元素與外面的元素不會發生影響
普通文件流的佈局規則
1：浮動的元素不會被父級計算高度（父級高度塌陷）
2：非浮動元素會覆蓋浮動元素的位置
3:margin會傳遞給父級
4:2個相鄰的元素上下元素會重疊
BFC的佈局規則
1：浮動的元素會被父級計算高度( 父級觸發了BFC)
2: 非浮動元素不會覆蓋浮動元素的位置（非浮動元素觸發了BFC）
3：margin不會傳遞給父級（父級觸發了BFC）
4:兩個相鄰的元素上下margin不會重疊（給其中一個元素新增一個單獨的父級，然後讓他的父級觸發BFC）
觸發BFC的方式（以下任意一條就可以）
1：float的值不為null
2:overflow的值不為visible
3:display的值為table-cell,table-caption,inline-block
4:position的值不為static,relative
舉幾個栗子：
1：自適應兩欄佈局：
程式碼
<style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div class="aside"></div> <div class="main"></div> </body>
頁面顯示：
注意：非浮動元素會覆蓋浮動元素的位置，就是主區和左欄開始位置重疊了，解決辦法，讓非浮動元素觸發BEC
.main {
overflow: hidden;
}
觸發main生成BFC後，這個新的BFC不會與浮動的aside重疊。因此會根據包含塊（父級）的寬度，和aside的寬度，自動變窄。效果如下
2：清除內部浮動
1 <style> 2 .par { 3 border: 5px solid #fcc; 4 width: 300px; 5 } 6 7 .child { 8 border: 5px solid #f66; 9 width:100px; 10 height: 100px; 11 float: left; 12 } 13 </style> 14 <body> 15 <div class="par"> 16 <div class="child"></div> 17 <div class="child"></div> 18 </div> 19 </body>
頁面效果：
為達到清除內部浮動，我們可以觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與計算
1 .par { 2 overflow: hidden; 3 }
3：防止頁面margin重疊問題
1 <style> 2 p { 3 color: #f55; 4 background: #fcc; 5 width: 200px; 6 line-height: 100px; 7 text-align:center; 8 margin: 100px; 9 } 10 </style> 11 <body> 12 <p>Haha</p> 13 <p>Hehe</p> 14 </body>
頁面顯示：
margin重疊問題造成了兩個P之間的上下距離還是100
我們可以在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。
程式碼：
1 <p>Haha</p> 2 <div style='overflow:hidden;'> 3 <p>Hehe</p> 4 </div
頁面顯示：
