CSS盒模型和BFC

CSS盒模型和BFC

1. 为什么要了解BFC渲染机制？

   在开发过程中我们可能会遇到以下几种情况：

   • 垂直方向上元素margin的合并现象（嵌套元素）

     <div class="father">
         <div class="son"></div>
     </div>
     

     .father{
                 width:200px;
                 height:200px;
                 background: aquamarine;
             }
     .son{
                 width:100px;
                 height:100px;
                 background: #f4ff93;
                 margin-top:50px;
             }
     

     实际效果：父子元素同时向下移动50px

     问题：为什么父元素也会下移50px（父元素设置overflow:hidden可解决问题）？

   • 垂直方向上元素margin的合并现象（兄弟元素）

     <div class="borther1"></div>
     <div class="borther2"></div>
     

     .borther1{
                 width:100px;
                 height:100px;
                 background: aquamarine;
                 margin-bottom:60px;
             }
     .borther2{
                 width:100px;
                 height:100px;
                 background: #f4ff93;
                 margin-top:40px;
             }
     

     实际效果：兄弟元素之间实际间隔为60px

     问题：为什么实际间隔只有60px（重叠取较大值）？

   • overflow:hidden可以清除浮动造成的副作用

     <div class="father">
         <div class="son"></div>
     </div>
     

     .father{
                 width:200px;
                 border:2px solid red;
             }
             .son{
                 width:100px;
                 height:100px;
                 background: #f4ff93;
                 float:left;
             }
     

     实际效果：父元素出现塌方情况，为父元素添加overflow:hidden，可解决塌方问题

     问题：为什么为父元素添加overflow:hidden可解决塌方问题？

   • overflow:hidden配合浮动，可以实现2栏自适应布局

     <div class="wrapper">
         <div class="left"></div>
         <div class="right"></div>
     </div>
     

     .left{
                 width:300px;
                 height:100px;
                 background: aquamarine;
                 float: left;
             }
             .right{
                 height:100px;
                 background: antiquewhite;
                 overflow: hidden;
             }
     

     实际效果：两栏布局正常

     问题：为什么为右边的div添加overflow:hidden可以实现两栏布局？

2. 盒模型

   css盒模型分为W3C盒模型和IE盒模型，一般默认为W3C盒模型

   • 盒模型四要素：margin 、border、padding、content
   • 区别：IE盒模型的width是从border开始计算的
   • 通过CSS3的box-sizing:border-box可以设置为IE盒模型

3. BFC

   BFC （Block Formatting Context）块级格式化上下文，是css盒模型的渲染规则，渲染规则如下：

   • 创建了BFC的元素中，在垂直方向上的margin会发生重叠
   • BFC元素在页面上是独立的容器，外面的元素和里面的元素互不影响
   • BFC元素不会和浮动的元素重叠（两栏布局）
   • 计算BFC元素的高度时，里面浮动元素的高度也会参与计算（overflow:hidden清除浮动引发的塌方问题）

4. 怎么用

   根元素html就是最大的BFC容器

   以下情况会触发BFC

   • float不为none
   • overflow不为visible
   • position不为static 和 relative
   • display:table-cell / table-caption / inline-block 任何一个