inline-block、BFC、邊距合并

1. 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例

外邊距合并：
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖：

外邊距合并

大體就是這樣，具體如下：

  • 前提：
  1. 相鄰兄弟元素：
    相鄰兄弟元素的外邊距會(huì)合并（當(dāng)靠后的元素 清除浮動(dòng)時(shí)除外）。
  1. 父元素與第一個(gè)或最后一個(gè)子元素：
    如果塊元素的margin-top與它的第一個(gè)子元素的margin-top 之間沒(méi)有 border、padding、inline content、 clearance 來(lái)分隔，或者塊元素的 margin-bottom 與它的最后一個(gè)子元素的margin-bottom 之間沒(méi)有 border、padding、inline content、height、min-height、 max-height 分隔，那么外邊距會(huì)合并。
    空塊元素：
    如果塊元素的 margin-top 與 margin-bottom 之間沒(méi)有 border、padding、inline content、height、min-height 來(lái)分隔，那么它的上下外邊距將會(huì)合并。
  • 外邊距合并場(chǎng)景：
  1. 同一父元素下垂直相鄰的兄弟元素；
  2. 父元素和子元素（下外邊距需要考慮相鄰）；
  3. 兄弟元素和他們的子元素；
  4. 高度為0并且最小高度也為0，不包含常規(guī)文檔流的元素；

eg：
① 第一種情況：兄弟元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      .container {
        border: 1px solid;
        width: 300px;
        height: 300px;        /* 盒子高300px */
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-bottom: 100px;    /* 下外邊距100px */
      }
      .div2 {
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 255, 0.5);
        margin-top: 100px;      /* 上外邊距100px */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="div1">1</div>
      <div class="div2">2</div>
    </div>
  </body>
</html>

效果圖：

兄弟元素下邊距和上邊距合并

如圖，兩個(gè)子元素盒子高度為100px，container高300px，所以中間只有100px，即外邊距合并后的100px。

② 第二種情況，父元素與子元素的合并：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .container {
        /*border: 1px solid;*/       /* 將元素邊框去除，其他樣式不變 */
        width: 300px;
        height: 300px;
        margin-top: 100px;         /* 給div1的父元素加上外邊距100px */
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-bottom: 100px;
        margin-top: 100px;         /*給div1加上外邊距100px */
      }
      .div2 {
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 255, 0.5);
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="div1">1</div>
      <div class="div2">2</div>
    </div>
  </body>
</html>

效果圖：

父元素子元素合并

如圖所示，在其他樣式不變的情況下，父元素的上外邊距100px和div1的上外邊距100px發(fā)生了合并，最終為100px。

③ 第三種情況，兄弟元素以及他們的子元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .ct1 {
        width: 300px;
        height: 300px;         
        margin-bottom: 95px;        /* ct1下外邊距95px */
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-bottom: 100px;
      }
      .div2 {
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 255, 0.5);
        margin-top: 100px;
        margin-bottom: 150px;      /* div2下外邊距150px */
      }
      .ct2 {
        width: 300px;
        height: 300px;
        margin-top: 90px;              /* ct2上外邊距90px */
        background: rgba(255, 255, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1">1</div>
      <div class="div2">2</div>
    </div>
    <div class="ct2"></div>
  </body>
</html>

效果圖：

父子元素未合并

如圖所示，出現(xiàn)了問(wèn)題，雖然沒(méi)有border和padding的限制，但最終的外邊距是95px，而不是150px，為此在W3上找到了原因：

bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

意思就是對(duì)于margin-bottom來(lái)說(shuō)，父元素高度需為auto才能和子元素合并。不過(guò)經(jīng)過(guò)摸索，發(fā)現(xiàn)除了auto還有min-height可以實(shí)現(xiàn)效果，不過(guò)min-height需要小于等于auto的高度，否則合并完會(huì)多出一部分多余的min-height值，所以解決方法就是：ct1的height需要改為min-height：

      .ct1 {
        width: 300px;
        min-height: 300px;          /* height改為min-height */
        margin-bottom: 95px;        /* ct1下外邊距95px */
      }
正確示范

如圖所示，ct1和ct2之間的外邊距是150px，說(shuō)明3個(gè)外邊距發(fā)生了合并，取了最大值150px。

④ 第四種情況，高度為0并且最小高度也為0，不包含常規(guī)文檔流的元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style type="text/css" media="screen">
    div {
      text-align: center;
      line-height: 50px;
    }
    .div1 {
      background: rgba(0, 175, 255, 0.5);
      border: 1px solid;
    }
    .div2 {
      width: 100px;
      height: 50px;
      background: rgba(255, 213, 0,0.7);
    }
    .div3 {
      margin: 100px 0 -50px;
      height: 0;
      min-height: 0;
    }
  </style>
  <body>
    <div class="div1">
      <div class="div2">2</div>
      <div class="div3"></div>
    </div>
  </body>
</html>
空元素上下合并

如圖可以看出，空元素上下進(jìn)行了合并，與div2的height數(shù)值相同為50px。

考慮多邊合并：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style type="text/css" media="screen">
    div {
      text-align: center;
      line-height: 50px;
    }
    .div1 {
      background: rgba(0, 175, 255, 0.5);
      border: 1px solid;
    }
    .div2,.div4 {
      width: 100px;
      height: 50px;
      background: rgba(255, 213, 0,0.7);
    }
    .div3 {
      margin: 100px 0 -50px;          /* 將height和min-height刪除，假設(shè)auto同樣可行 */
    }
    .div4 {
      margin-top: 100px;                  /* div4上外邊距為100px */
    }
  </style>
  <body>
    <div class="div1">
      <div class="div2">2</div>
      <div class="div3"></div>
      <div class="div4">4</div>          /* 增加div4 */
    </div>
  </body>
</html>

多邊距合并

發(fā)現(xiàn)了問(wèn)題，當(dāng)上下邊距合并后為50px，與div4合并的時(shí)候，100px大于50px，應(yīng)該為100px外邊距，但是現(xiàn)在外邊距是50px，為什么？因?yàn)楹喜⒁?guī)律是：

在負(fù)外邊距的情況下，合并后的外邊距為最大正外邊距與最小負(fù)外邊距之和。

所以并不是根據(jù)嵌套合并，而是根據(jù)正負(fù)來(lái)合并，所以-50px和100px合并才得到50px的外邊距。

  • 如何合并：
  1. 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，合并取兩者之間較大的值：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .ct1 {
        width: 300px;
        min-height: 300px;
        margin-bottom: 95px;
        border: 1px solid;
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-bottom: 100px;                        /* div1外邊距100px */
      }
      .div2 {
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 255, 0.5);
        margin-top: 50px;                            /* div2外邊距50px */
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1">1</div>
      <div class="div2">2</div>
    </div>
  </body>
</html>
正外邊距合并

2.兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，合并取兩者絕對(duì)值的較大值：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .ct1 {
        width: 300px;
        min-height: 300px;
        margin-bottom: 95px;
        border: 1px solid;
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-bottom: -50px;                  /* div1下外邊距為-50px */
      }
      .div2 {
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 255, 0.5);
        margin-top: -1px;                /* div2下外邊距為-1px */
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1">1</div>
      <div class="div2">2</div>
    </div>
  </body>
</html>
雙負(fù)外邊距合并

3.兩個(gè)外邊距一正一負(fù)時(shí)，合并為兩者的相加的和：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .ct1 {
        width: 300px;
        min-height: 300px;
        margin-bottom: 95px;
        border: 1px solid;
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-bottom: 50px;             /* div1下外邊距為50px */
      }
      .div2 {
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 255, 0.5);
        margin-top: -25px;                /* div2下外邊距為-25px */
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1">1</div>
      <div class="div2">2</div>
    </div>
  </body>
</html>
一正一負(fù)外邊距
  • 防止相鄰元素外邊距合并：
  1. 父子關(guān)系元素，給父元素加上padding或者border：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .ct1 {
        width: 300px;
        min-height: 300px;
        border: 1px solid;
        margin-top: 100px;
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1">1</div>
    </div>
  </body>
</html>
截?cái)嗤膺吘嗪喜?/div>

方法二：BFC：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .ct1 {
        width: 300px;
        min-height: 300px;
        margin-top: 100px;
        overflow: auto;       /* 創(chuàng)建BFC */
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1">1</div>
    </div>
  </body>
</html>
BFC截?cái)喔缸釉赝膺吘嗪喜?/div> 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .ct1 {
        width: 300px;
        min-height: 300px;
        margin-top: 100px;
        float: left;         /* BFC概念 */
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1">1</div>
    </div>
  </body>
</html>

float阻止外邊距合并

諸如此類的，還有absolute定位，inline-block，不再贅述。

2.相鄰元素：
情況一：inline-block，absolute截?cái)嗪喜?，具體情況如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
    * {
      margin: 0;
      padding: 0;
    }
      .div1 {
        width: 150px;
        height: 150px;
        border: 1px solid;
        background: silver;
        margin-bottom: 100px;
        display: inline-block;         /* 用BFC，使渲染方式不同 */
      }
      .div2 {
        width: 150px;
        height: 150px;
        border: 1px solid;
        background: #efe0ce;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="div1">1</div>
    <div class="div2">2</div>
  </body>
</html>

BFC阻止外邊距合并

情況二：一個(gè)常規(guī)文檔流元素的margin-bottom與它下一個(gè)常規(guī)文檔流的兄弟元素的margin-top會(huì)產(chǎn)生折疊，除非它們之間存在間隙：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .ct1 {
        border: 1px solid;
      }
      .div1 {
        height: 100px;
        width: 100px;
        background: pink;
        margin: 0 0 60px 0;
      }
      .div2 {
        float: left;
        height: 50px;
        width: 100px;
        background: rgba(0, 255, 255, 1);
        opacity: 0.4;
      }
      .div3 {
        height: 50px;
        width: 100px;
        background: rgba(255, 0, 255, 0.5);
        margin-top: 40px;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="ct1">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>
  </body>
</html>

Paste_Image.png

情況三：
在之前介紹的邊距合并產(chǎn)生條件中，有介紹不能含有clearance，或者h(yuǎn)eight，有相應(yīng)演示，不再贅述。
情況四：
空元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .ct1 {
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 0, 0.5);
        border: 1px solid;
      }
      .div1 {
        margin: 100px 0 50px 0;
        overflow: auto;              /* 用BFC */
      }
      .div2 {
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 255, 0.5);
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1"></div>
      <div class="div2">

      </div>
    </div>
  </body>
</html>
空元素借助BFC阻止合并

如圖所示，可以借助BFC的概念讓height=0的元素上下不合并。

  • 父子外邊距合并樣例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
      * {
      margin: 0;
      padding: 0;
      }
      .ct1 {
        width: 300px;
        min-height: 300px;
        margin-top: 100px;
        background: rgba(255, 0, 0, 0.5);
      }
      .div1 {
        width: 100px;
        height: 100px;
        background: rgba(0, 255, 255, 0.5);
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="ct1">
      <div class="div1">1</div>
    </div>
  </body>
</html>
父子元素合并

補(bǔ)充：
關(guān)于clearance：

當(dāng)浮動(dòng)元素之后的元素設(shè)置clear以閉合相關(guān)方向的浮動(dòng)時(shí)，根據(jù)w3c規(guī)范規(guī)定，閉合浮動(dòng)的元素會(huì)在其margin-top以上產(chǎn)生一定的空隙（clearance，如下圖），該空隙會(huì)阻止元素margin-top的折疊，并作為間距存在于元素的margin-top的上方。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .big-box {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 20px 0;
      }
      .floatL {
        width: 80px;
        height: 80px;
        margin: 20px 0;
        background: rgba(0, 255, 0, 0.6);
        float: left;
      }
      .clear {
        width: 80px;
        height: 80px;
        margin: 40px 0;
        background: red;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="wrapper overHid">
    <div class="big-box">non-float</div>
    <div class="middle-box green floatL">float left</div>
    <div class="middle-box red clear">clear</div>
</div>
  </body>
</html>
clearance

clearance原理

上面的圖中我們可以看到，我們?yōu)榧t色塊盒設(shè)置的40px的margin-top（這里我們通過(guò)相同高度的陰影來(lái)將其可視化）好像并沒(méi)有對(duì)紫色塊盒起作用，而且無(wú)論我們?cè)趺葱薷倪@個(gè)margin-top值都不會(huì)影響紅色塊盒的位置，而只由綠色塊盒的margin-bottom所決定。
通過(guò)w3c的官方規(guī)范可知，閉合浮動(dòng)的塊盒在margin-top上所產(chǎn)生的間距（clearance）的值與該塊盒的margin-top之和應(yīng)該足夠讓該塊盒垂直的跨越浮動(dòng)元素的margin-bottom，使閉合浮動(dòng)的塊盒的border-top恰好與浮動(dòng)元素的塊盒的margin-bottom相鄰接。
可以得出這樣一個(gè)式子：r-margin-top + r-clearance = g-margin-top + g-height + g-margin-bottom

經(jīng)判斷，這個(gè)例子是正確的，并且可以理解為，兩個(gè)元素中間含有clearance，那么將不會(huì)產(chǎn)生外邊距合并，且clearance不是個(gè)定值，是自然產(chǎn)生的。以此類推，min-height和height也是類似于這樣的原理使外邊距無(wú)法合并。

由于知識(shí)點(diǎn)比較零散，作如下整理：

外邊距合并mindmanager

注意圖中防止合并里，創(chuàng)建BFC和直接利用浮動(dòng)、絕對(duì)定位、inline-block不同，前者利用BFC獨(dú)立環(huán)境特性，后者利用各自屬性特性，區(qū)別在此，所以區(qū)分著寫(xiě)；至于BFC，后面內(nèi)容會(huì)有BFC的概念，此導(dǎo)圖內(nèi)不再贅述。
附件：鏈接: http://pan.baidu.com/s/1dEEm8vR 密碼: qn91

參考：
W3 Box model
MDN|CSS 外邊距合并
w3cschool 外邊距合并
深入理解BFC和Margin Collapse

2. 去除inline-block內(nèi)縫隙有哪幾種常見(jiàn)方法?

原理:瀏覽器bug將inline-block元素標(biāo)簽之間的縫隙視作文本。
** 去除方法**：
1.inline-block內(nèi)縫隙是html中white-spacing屬性處理得到，所以可以刪除html中多余的空格來(lái)去除縫隙：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #header {
        height: 50px;
        border-bottom: 1px solid #ccc;
      }
      .nav > li {
        display: inline-block;
        background: rgba(255, 0, 255, 0.5);
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="header">
        <ul class="nav">
          <li>tag1</li>
          <li>tag2</li><li>tag3</li>       <!--產(chǎn)生原因，由于-->
          <li>tag4</li>
        </ul>
    </div>
  </body>
</html>
inline-block縫隙

或者還可以這樣寫(xiě)：

  <body>
    <div id="header">
        <ul class="nav">
          <li>tag1</li
            ><li>tag2</li          
              ><li>tag3</li
                ><li>tag4</li>             <!--分隔開(kāi)，不留間隙-->
        </ul>
    </div>
  </body>

2.或者用負(fù)外邊距實(shí)現(xiàn)去除效果，不過(guò)第一個(gè)元素會(huì)溢出元素框，需要單獨(dú)設(shè)置：

      .nav > li {
        display: inline-block;
        background: rgba(255, 0, 255, 0.5);
        line-height: 50px;
        margin-left: -8px;          /* 負(fù)外邊距 */
      }

負(fù)margin消除inline-block縫隙

3.可以用浮動(dòng)屬性來(lái)去除縫隙，不過(guò)要記得用BFC將父元素?fù)伍_(kāi)：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #header {
        height: 50px;
        border-bottom: 1px solid #ccc;
      }
      .nav > li {
        display: inline-block;
        background: rgba(255, 0, 255, 0.5);
        line-height: 50px;
        float: left;
      }
      .nav {
        overflow: auto;                 /* 用BFC清除父元素浮動(dòng) */
        background: rgba(255, 255, 0, 0.7);
      }
    </style>
  </head>
  <body>
    <div id="header">
        <ul class="nav">
          <li>tag1</li>
          <li>tag2</li>
          <li>tag3</li>
          <li>tag4</li>
        </ul>
    </div>
  </body>
</html>
浮動(dòng)清除縫隙

4.在父元素寫(xiě)上font-size：0；消除空格占位符的大小以去除縫隙：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #header {
        height: 50px;
        border-bottom: 1px solid #ccc;
      }
      .nav {
        background: rgba(255, 255, 0, 0.7);
        font-size: 0;                   /* 父元素消除縫隙空白占位符 */
      }
      .nav > li {
        display: inline-block;
        background: rgba(255, 0, 255, 0.5);
        line-height: 50px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="header">
        <ul class="nav">
          <li>tag1</li>
          <li>tag2</li>
          <li>tag3</li>
          <li>tag4</li>
        </ul>
    </div>
  </body>
</html>
font-size:0消除縫隙

3. 父容器使用overflow: auto| hidden撐開(kāi)高度的原理是什么？

  1. 首先看下overflow的相關(guān)內(nèi)容：
    overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
    其屬性值為：
屬性值 描述
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外
hidden 內(nèi)容會(huì)被修剪，修建部分是不可見(jiàn)的
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容，且總是顯示滾動(dòng)條
auto 如果內(nèi)容溢出，則修剪，并顯示滾動(dòng)條，不溢出不修剪不顯示滾動(dòng)條
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值，任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
  1. 再來(lái)看看BFC的概念：

浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）。
在BFC中，盒子從頂端開(kāi)始垂直地一個(gè)接一個(gè)地排列，兩個(gè)盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個(gè)BFC中，兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)產(chǎn)生折疊。
首先BFC是一個(gè)名詞，是一個(gè)獨(dú)立的布局環(huán)境，我們可以理解為一個(gè)箱子（實(shí)際上是看不見(jiàn)摸不著的），箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來(lái)消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來(lái)的影響。）

可以看出，overflow本身并沒(méi)有什么特別之處，而是會(huì)產(chǎn)生BFC，創(chuàng)造獨(dú)立布局環(huán)境，使元素不受浮動(dòng)元素的影響。
所以針對(duì)撐開(kāi)父元素的情況，是由于父元素創(chuàng)建了BFC，使父元素形成獨(dú)立環(huán)境，從而浮動(dòng)元素被包含在內(nèi)，自然撐開(kāi)。

4. BFC是什么？如何形成BFC，有什么作用?

在前一個(gè)問(wèn)題里，將BFC的概念簡(jiǎn)單說(shuō)了下，以及它其中的一個(gè)作用——清除浮動(dòng)的影響，撐開(kāi)父元素。下面具體說(shuō)說(shuō)BFC的具體情況：

  1. 形成BFC：
  • 用float屬性（none值除外）；
  • 用絕對(duì)定位absolute；
  • overflow（visible值除外）；
  • display屬性為table-cell, table-caption, inline-block, flex, 或者inline-flex
  1. 作用：
  • 撐開(kāi)父元素（見(jiàn)問(wèn)題3）；
  • 阻止外邊距合并（見(jiàn)問(wèn)題1）；
  • 清除浮動(dòng)的文字環(huán)繞影響或位置影響

總結(jié)：BFC用法靈活，可以解決很棘手的問(wèn)題，不過(guò)不是萬(wàn)能的，具體問(wèn)題具體分析（見(jiàn)題1）

5. 浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法

高度塌陷是指，在父元素的height為0時(shí)，對(duì)其內(nèi)部元素應(yīng)用浮動(dòng)屬性，浮動(dòng)屬性使元素脫離文檔流，而父元素沒(méi)有元素可以支撐，從而高度塌陷，變?yōu)?。

首先不用浮動(dòng)，導(dǎo)航欄效果如圖：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      #header {
        border-bottom: 1px solid #ccc;
      }
      .nav {
        background: rgba(255, 255, 0, 0.7);
        border: 1px solid blue;
      }
      .nav > li {
        display: inline-block;
        background: rgba(255, 0, 255, 0.5);
        /*float: left;*/
      }
    </style>
  </head>
  <body>
    <div id="header">
        <ul class="nav">
          <li>tag1</li>
          <li>tag2</li>
          <li>tag3</li>
          <li>tag4</li>
        </ul>
    </div>
  </body>
</html>
導(dǎo)航欄

當(dāng)我為了將inline-block屬性的縫隙去除時(shí)，采用浮動(dòng)，效果如下：

      .nav > li {
        display: inline-block;
        background: rgba(255, 0, 255, 0.5);
        float: left;                   /* 子元素應(yīng)用浮動(dòng) */
      }
浮動(dòng)對(duì)父元素高度影響

可以看出父元素的藍(lán)色邊框變?yōu)榱艘粭l線，這是因?yàn)楦?dòng)之后子元素脫離文檔流，從而父元素高度塌陷。

解決方法：
1.利用空元素清除浮動(dòng)：

  • 第一種：在html中添加空元素：
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      #header {
        border-bottom: 1px solid #ccc;
      }
      .nav {
        background: rgba(255, 255, 0, 0.7);
        border: 1px solid blue;
      }
      .nav > li {
        display: inline-block;
        background: rgba(255, 0, 255, 0.5);
        float: left;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div id="header">
        <ul class="nav">
          <li>tag1</li>
          <li>tag2</li>
          <li>tag3</li>
          <li>tag4</li>
          <div class="clear"></div>
        </ul>
    </div>
  </body>
</html>
Paste_Image.png
  • 第二種，在CSS中創(chuàng)建空元素：
.nav:after {
        content: '';
        display: block;
        clear: both;
      }
偽類效果圖

2.使用BFC，使父元素按照BFC渲染，包含住浮動(dòng)元素：

      .nav {
        background: rgba(255, 255, 0, 0.7);
        border: 1px solid blue;
        overflow: hidden;
      }
BFC清除浮動(dòng)影響

如圖，父元素高度恢復(fù)正常，如果用其他BFC屬性也可以，不過(guò)有一定的副作用，下面來(lái)依次說(shuō)明：

方法 說(shuō)明
overflow 副作用最小，不過(guò)可能會(huì)不需要overflow的特性
absolute 收縮元素寬度，不易解決
float 收縮元素寬度，影響布局，可借助clear解決
inline-block 收縮元素寬度，不易解決

6. 以下代碼每一行的作用是什么？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開(kāi)空間有什么區(qū)別？

.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
未加代碼

加上代碼

如圖所示：
應(yīng)用這個(gè)屬性，可以將父元素高度撐開(kāi)，避免子元素浮動(dòng)之后，父元素高度塌陷。

代碼 說(shuō)明
.clearfix:after clearfix的after偽類選擇器，在元素最后應(yīng)用屬性
content: ''; 內(nèi)容為空
display: block; 表現(xiàn)為塊級(jí)元素，如果不表現(xiàn)，行內(nèi)元素不會(huì)撐開(kāi)父元素
clear: both; 清除兩邊浮動(dòng)
*zoom: 1; IE專有屬性，縮放比例，也可用于檢查BUG，參數(shù)設(shè)為1的話，多用于清除浮動(dòng)

關(guān)于zoom：
這個(gè)屬性是IE專有屬性，其他瀏覽器沒(méi)有，它可以設(shè)置或檢索對(duì)象的縮放比，它還有其他一些小作用，比如觸發(fā)ie的hasLayout屬性，清除浮動(dòng)、清除margin的重疊等?，F(xiàn)在已經(jīng)基本不用這個(gè)屬性，所以僅在考慮兼容的清除浮動(dòng)會(huì)用到。

本文版權(quán)歸本人及饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源。謝謝！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容