關於CSS中設置overflow屬性的值爲hidden的相關理解

包裹元素剪裁條件

是否是包裹元素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的祖先元素建立（若是沒有找到這樣的祖先元素，這個絕對定位的元素的包含塊爲初始包含塊）；具體建立方法以下：

[1] 若是這個祖先元素是行內元素，包含塊的範圍是這個祖先元素中的第一個和最後一個行內盒的padding box圍起來的區域；

[2] 若是這個祖先元素不是行內元素，包含塊的範圍是這個祖先元素的內邊距+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重疊。