CSS BFC | 易学教程

1、什么是BFC

　　BFC就是一种属性。这种属性可以影响元素的定位以及其兄弟元素之间的相互作用。BFC是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。中文城块级格式化上下文

BFC的布局规则如下：
1. 内部的盒子会在垂直方向，一个个地放置；
2. BFC是页面上的一个隔离的独立容器；
3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠；
4. 计算BFC的高度时，浮动元素也参与计算
5. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
6. BFC的区域不会与float重叠；

那么如何触发 BFC呢？只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素；
浮动元素：float 不为none的属性值；
绝对定位元素：position (absolute、fixed)
display为： inline-block、table-cells、flex
overflow 除了visible以外的值 (hidden、auto、scroll)

BFC作用：

　　1、利用BFC可以消除下边距折叠。

<body>

   <div class="p"></div>  

   <div class="p"></div>  

</body>

这样的两个p会发生下边距重叠。那么如果它们属于不同的BFC，则不会有margin collapse.因此我们可以再建立一个BFC去阻止margin collpase的发生。

如这样：

<div class="p"></div>  

 

<div class="wrap">  

  <div class="p"></div>  

</div> 

 

.wrap {  

  overflow:hidden; 

}

2、BFC清除浮动

　　实际上在父元素上添加overflow：hidden；清除浮动就是BFC的功劳，在父元素上触发BFC，因为计算BFC的高度时，浮动元素也参与计算

3、BFC 可以阻止元素被浮动元素覆盖

　　通常我们实现两列布局是在左边设置margin：left 来实现，但是利用BFC，在左边设置overflow：hidden 也可以实现两列布局

来源：https://www.cnblogs.com/lilei-site/p/12315770.html

标签

bfc

绝对定位

css