margin 塌陷問題 BFC

 .box1{
       width: 200px;
       height: 200px;
       background: red;
       margin-top: 100px;
     }
   .box2{
       width: 100px;
      height: 100px;
       background: green;
       margin-top:80px ;
  }

<div class="box1">
     <div class="box2">
     </div>
 </div>

你會發現上面兩個div中裏面的div的margin-top不起效果
這是因爲裏面的div margin-top值小於 外面的div margin-top值
如果設置裏面div margin-top值大於外面div margin-top值 你就會
發現整體都移動了 這是由於margin塌陷。

解決辦法：

• 給外層元素加border 但不推薦這樣 因爲導致了多餘了像素增加
  也不符合設計要求
• BFC(block format context)塊級格式化上下文

什麼是BFC：

css把html中每一個元素都當成一個盒子，每個盒子都有一套渲染規則，
 能按照你寫的樣式完整繪製出來，就像每個細胞都有一套DNA一樣，
 bfc就是可以通過特定的手段將某個盒子的渲染規則發生改變，
 列如正常情況下寬高100px的div 再觸發BFC之後可能不是100px。
 但是BFC改變的渲染規則很少很少，假如有100條規則的話
  BFC改變的連0.1條都不到但正是這很少的幾條就可以用來
  解決margin塌陷。正常來說BFC沒什麼用，但一到margin塌陷這BFC就好用了  

觸發BFC的條件：

position:absolute,

overflow:hidden

position:absolute,

display:inline-block

給box1 加上：
position:absolute 或 
display:inline-block 或 
 float:left/right 或
  overflow:hidden

但是使用BFC雖然解決了margin塌陷問題，但是你加上的這些樣式又會出現新的問題，
  所以究竟使用哪種觸發條件 看情況而定，選擇不影響原本樣式的哪種