BFC与浮动

一、BFC的含义

BFC(block formatting contexts） 块级元素格式化上下文，它决定了块级元素如何对它的内容进行布局，以及与其它元素的关系和相互作用。

块级元素：父级（是一个块元素）

内容：子元素（是一个块元素）

其它元素：与内容同级别的兄弟元素

相互作用：BFC里的元素与外面的元素不会发生影响

 

二、浮动触发条件

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、table-caption、inline-block、inline-flex、flex

4.position的值为absolute或fixed

 

三、浮动应用场景

1.自适应两栏布局

原本为

在main中添加样式overflow：hidden，触发main生成BFC后

 

2.清除浮动

原图为

为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。在par中添加overflow:hidden后

3.防止垂直margin重叠

   

Haha
Hehe

此时margin会出现重叠取最大值为100margin

解决方法：在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

    
Haha
    

        
Hehe
    

效果如下

 4.子元素添加margin-top，父元素会一起掉下来

 

 

四、BFC布局与普通文档流布局的区别

普通文档流布局规则

1.浮动的元素是不会被父级计算高度

2.非浮动元素会覆盖浮动元素的位置

3.margin会传递给父级

4.两个相邻元素上下margin会重叠

 

BFC布局规则

1. 内部的Box会在垂直方向，一个接一个地放置。

2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠(两个盒子在不同的BFC内，就不会发生重叠)。

3. 每个box的左边与包含块的左边相接触(对于从左往右的格式化，否则相反);即使存在浮动也是如此。

4. BFC的区域不会与float box重叠(两栏布局)。

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素;反之也如此。

6. 计算BFC的高度时，浮动元素也参与计算。

 

 

五、什么是浮动

在MDN中关于浮动的描述如下：

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

举个例子：

    
    
    


a
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

显示结果如下：

然后添加float：left后

 

 六、浮动对布局的影响

 1.块级元素浮动将并排显示，不会独占一行

 

转载于:https://www.cnblogs.com/lanhuo666/p/10514586.html