css 清除浮動 & BFC

前言：這是筆者學習以後本身的理解與整理。若是有錯誤或者疑問的地方，請你們指正，我會持續更新！

 

　　文檔流的概念：html 中 block 塊元素默認是單獨佔據一行的，從上到下排列，也就是咱們說的文檔流。

　　脫離文檔流的概念：A 元素定義了 float 屬性以後，就會"浮"起來，原來佔據的空間由後面的 B 元素佔據。

　　若是浮動起來的 A 元素和 B 元素髮生重疊，浮動起來的 A 元素就會覆蓋 B 元素。

　　浮動元素具備內聯元素的特性，不在單獨佔據一行，相鄰的浮動元素，最前面的具備 left 屬性值的排在最左邊，最前面的具備 right 屬性值的排在最右邊。

　　當多個浮動元素一排容不下時，就換行。

　　浮動會帶來各類佈局問題，主要是父容器塌陷（子元素在父元素外面，影響後面的佈局），也就有各類解決方案，利用clear屬性清除浮動或者使父容器造成 BFC。

利用 clear:both 清除浮動

　　在浮動元素後面在建立一個空的非浮動的 div(inline元素不能夠)，並賦予屬性 clear:both; 

　　實際應用中咱們更多采用 :after 僞元素加在父容器上來清除浮動，定義一個 clearfix 的 class，而後給它添加一個 :after 僞元素，它會在父容器的內容最後面在添加一個看不見的塊元素，咱們給它定義 clear:both;

/* 清除浮動 */
.clearfix:after {
      content: '';
      display: block;
      height: 0;
      clear: both;
      font-size: 0;
      visibility: hidden;
}
.clearfix {
    /*觸發hasLayout,這又涉及到IE瀏覽器hack的知識*/
      zoom: 1;
}

 

BFC 學習

　　父容器造成 BFC 能夠解決父容器內部子元素浮動引發的塌陷問題。

　　BFC 元素特性就是不論內部怎樣，都不會影響外部佈局。

 　　如何觸發BFC？

• float 值爲 left\right
• overflow 值爲 auto  |  scroll  |  hidden
• display 值爲 table-cell  |  table-captain  |  inline-block
• position 值爲 absolute 或 fixed

　　咱們能夠給父容器添加這些屬性造成 BFC，達到「清」浮動（包含浮動）。

　　div 設置 float 屬性以後會產生 inline-block 特性，不會佔據一整行了。

　　position:absolute 會使父容器脫離文檔流，雖然打成了目的，但父容器的位置問題又來了。

　　overflow：auto  |  scroll 有時候會出現滾動條。

　　overflow：hidden 須要肯定不會出現溢出裁剪，不少企業不讓用 overflow，咱們需靈活掌握。

　　最後，Nicolas Gallagher 大師提供了一種更簡便的方法，用的是 display:table。

    .clearfix:before, /*:before處理margin上下重疊*/
    .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        zoom: 1;
    }

　　這裏的 :before 它是來處理 margin 上下重疊的；

margin 重疊

　　上下兩個 div，上面的賦予 margin-bottom:20px，下面的賦予 margin-top:10px，那麼兩個div之間的間距是多少呢？

　　兩個 div 之間的間距是 20px，由於發生了 margin 重疊，兩個值那個大，間距就是哪一個。

　　上面說的是上下兩個 div，那麼一個 div 在另外一個 div 中呢？狀況也是同樣的，會發生重疊，只是變成了 top-top，bottom-bottom 重疊。

　　兩個相鄰的元素，嵌套的元素，只要它們之間沒有阻擋，就會發生 margin 重疊。

 

　　margin重疊解決方法：

　　上下兩個 div，這種狀況通常不會用到，你看效果圖的時候，通常都只會給其中一個 div 賦予 margin 的，都沒有顏色，你也看不出來誰是誰，上面的列子我只是說存在這個狀況。

　　內外嵌套的 div，不少時候會見到：

• 咱們能夠在它們之間加個阻礙，父元素或者子元素加個透明邊框 border:1px solid transparent; 視狀況能夠具體到上邊框仍是下邊框
• 父元素或者子元素加個 padding:1px；視狀況能夠具體到上 padding 仍是下 padding
• 讓父元素和子元素不在同一個 BFC，視狀況給它們哪一個觸發 BFC