作者：心葉
時間：2018-04-18 17:53
包裹元素剪裁條件
是不是包裹元素overflow設定為hidden以後，內部元素如果超過包裹元素的話就會被剪裁？答案是不一定，這要看此刻的CSS環境。
根據對CSS2.1規範的理解，可以這樣表述：如果一個元素的包含塊的overflow屬性設定為hidden，那麼超過這個包含塊部分的內容就會被剪裁。
因此我們需要學會尋找一個元素的包含塊，不過在這之前，讓我們先簡單的知道如果一個元素的overflow屬性設定為hidden，被其包裹的內容如果溢位需要同時滿足的條件：
- 擁有overflow:hidden樣式的塊元素不具有position:relative和position:absolute樣式；
- 內部溢位的元素是通過position:absolute絕對定位或position:fixed固定定位。
尋找包含塊
什麼是包含塊？
根據CSS2.1規範裡面的說明，簡單的說就是：用來確定一個元素的盒子的位置和尺寸的矩形就叫這個元素的包含塊。
尋找規則
因此包含塊是一個非常有意義而且涉及屬性很多的概念，至於如何確定一個元素的盒子的包含塊是誰，遵循下面幾條規則：
- 根元素的包含塊
其包含塊又叫初始包含塊，可以先認為就是可視區域（其實不準確，姑且這樣說比較簡單）。
- 非根元素，且其position屬性是relative和static的元素的包含塊
它的包含塊是由最近的祖先塊容器盒的內容區域建立的。
- 非根元素，且其position屬性是absolute的元素的包含塊
它的包含塊由最近的position不為static的祖先元素建立（如果沒有找到這樣的祖先元素，這個絕對定位的元素的包含塊為初始包含塊）；具體建立方法如下：
- 如果這個祖先元素是行內元素，包含塊的範圍是這個祖先元素中的第一個和最後一個行內盒的padding box圍起來的區域；
- 如果這個祖先元素不是行內元素，包含塊的範圍是這個祖先元素的內邊距+width區域。
為什麼會清除浮動造成的影響
一個有趣的現象是：一個沒有設定高度的父元素包裹一個子元素，父元素應該會被子元素撐起來，也就是有高了，不過如果你給子元素設定了浮動，顯然原來父元素撐起來的高就塌了，到這裡好像都很正常；接著，你給父元素加了一個overflow:hidden，發現父元素的高又有了，好像浮動被清除了一樣，為什麼會這樣？
其實歸根結底，這裡的浮動沒有清除，只是因為overflow屬性的值是hidden的時候會形成一個BFC，而BFC就是一個隔離的渲染區域，因此浮動造成的高崩塌會導致對外部佈局的影響，為了消除這種不益的表現，計算高度的時候浮動元素也計算進去了。
如果說到這裡就停止，你可能會非常好奇，除了這裡的情況還有什麼情況會產生BFC，而BFC環境下具體會有哪些規則？接著下段來講。
BFC（塊級格式化上下文）
BFC是一個非常有用的環境，如果用一句話來說明它是什麼樣的存在：一個隔離的渲染區域，容器裡面的子元素不會在佈局上影響到外面的元素，反之也是如此。
如何觸發BFC?
只需要保證滿足下面至少一條就會觸發BFC：
- 根元素body；
- 設定了float值不為none的元素；
- 設定了overflow屬性不為visible的元素；
- 設定了屬性position不為relative和static的元素；
- 設定了display的值為flex、table-cell、table-caption和inline-block中的任何一個的元素。
可以看出來，就是一個比較獨立的塊，因為是一個獨立的環境，在開發時候適度使用會有效降低開發和維護難度。
BFC環境下的特性或規則
大致可以歸納為三個方面：獨立性、垂直分佈規則和水平分佈規則。
- 獨立性：BFC是頁面上一個隔離的容器，和外面的關係是不會互相影響，對浮動而言也是，不會和浮動元素髮生重疊，高也和上面提到的一樣不會崩塌；
- 垂直分佈規則：BFC的內部裡面的一個個盒子在垂直方向一個接著一個排放，位置由margin決定，兩個相鄰的盒子margin會發生重疊；
- 水平分佈規則：BFC裡面的盒子的左外邊緣和包含塊的左邊相接觸，簡單的理解就是水平方向不會發生margin重疊。
上面只是大體上說明一下BFC，具體使用的時候還有很多沒有說明的，比如上面垂直方向上的重疊如何控制發生與否？如果重疊那麼是如何計算的？不過本篇文章到這裡就結束了。