CSS新手向的知识点<四>

阅读本篇文章,你将大致了解到BFC的作用

关于BFC的知识

• BFC(block formatting context)即块格式上下文,是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。更多解释见mdn.
• BFC有主要有哪些作用?

1. 父代管子带.

• 注意:其可以把内部浮动元素包起来,在BFC中竖直上相邻的两个元素margin top与bottom会合并,
  一个BFC能包含其在内的所有内容,但是除了在其生成新的BFC

  
  
        
  


123
  
234
   
234
  

效果

可以看到左右margin是10px,上下也是10px,这里上下margin被合并了.

2. 邻居之间的划分界限,可用于用float+div做左右适应的布局.
   话不多说,直接上代码,可以看到wow1因为浮动,而盖住了wow2.

  
  
        
  


123
234

效果

如何让两者划清界限呢,我们让wow2也成为一个BFC就可以了,修改css代码为

.wow2{
          height:120px;
          border:1px solid blue;
          background: rgba(5,5,5,0.5);
          overflow:auto;
        }

效果

如何让一个元素成为BFC?

常见的有:

1. float不是none
2. overflow不是visible
3. position是fix或者absolute
4. display为inline类属性,table类属性,flex,grid,以及flow-root(盖属性只将元素变为BFC,但仅部分浏览器支持)
   更多见mdn.