BFC（块级格式上下文）

BFC（块级格式上下文）

可以解决：清除浮动问题、外边距合并问题、右侧自适应问题

BFC的生成

满足下列css声明之一的元素便会生成BFC

• 根元素
• float的值不为none
• overflow的值不为visible（常用 overflow:hidden创建BFC区域）
• display的值为inline-block、table-cell、table-caption
• position的值不为static或relative

BFC元素具有的特性

1、BFC区域与外部的布局互不相干。

2、在BFC中，盒子从顶端开始垂直地一个接一个地排列。

3、盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠（解决margin重叠问题，将发生嵌套的一个元素在外面嵌套一个父类并设置overflow:hidden）。

4、在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left），对于从右到左的格式来说则触碰到        右边缘。

5、BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘（可以做左图右文字的自适应布局）。

6、计算BFC的高度值，会检测BFC区域的浮动的盒子高度（清除浮动）。

	
		
		
		
	
	
	  

	  	
	    

	        1
	    
	    

	        
2
	    
    
	   
	  
		
	  

	

 

理解CSS中的BFC(块级可视化上下文)

参考链接：https://www.jianshu.com/p/82ef089d7a88