BFC与边距合并

什么是BFC

• 对于浮动元素和绝对定位元素，非块级盒子的块级容器（inline-block,table-cells,table-captions）,以及overflow不为visible的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）

BFC的特点

• 在BFC中，盒子从顶端垂直地一个接一个地排列，两个盒子之间的垂直地间隙是由他们的margin所决定，在一个BFC中两个相邻的块级盒子的垂直外边距会产生折叠。
• 在BFC中每个盒子的左外边缘会触碰到容器的左边缘

如何形成BFC

(1)float值不为none.(2)overflow的值不为visble.(3)display的值为“table-cell”,“table-caption”,or“inline-block”中的任何一个.(4)position的值不为“static”或“relative”中的任何一个.

BFC的作用

• 自适应两栏布局

  
  
  

  Paste_Image.png

• 清楚内部浮动

  
  
  

  Paste_Image.png

Paste_Image.png

Paste_Image.png

BFC的应用

• 我们看如下代码:
  HTML:

    
  
         ![](http://upload-images.jianshu.io/upload_images/2057643-f6faf1a920f9e377.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
         
  我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
    
    
  

CSS：

    .box {
            width:300px;
            height:300px;
    }
    .box img {
        float:left;
       width:100px;
       height:50px;
  }

查看预览效果：

Paste_Image.png

这并没有达到我们的目的，文字围绕图片。因为文字受到了浮动元素的影响。要达到我们想要的目的，我们得给p元素的内容建立一个BFC。让它的内容消除对外界浮动元素的影响。

  .box p {
        overflow:hidden;
    }

查看预览结果：

Paste_Image.png

边距合并

(1)在什么场景下会发生边距合并

• 两个相邻元素，第一个元素的下边距与第二个元素的上边距，发生边距合并。

Paste_Image.png

• 父子外边距，当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并.

Paste_Image.png

• 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并.

  
  
  

  Paste_Image.png