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 也可以实现两列布局

posted @ 2020-02-16 09:42  qgr678  阅读(150)  评论(0)  编辑  收藏  举报