关于BFC的定义及应用总结-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

天使的翅膀

1634

文章

929816

访问

+关注

分类

暂无分类

日期归档

2024-11(4)

关于BFC的定义及应用总结

发布于2021-03-08 20:02 阅读(1088) 评论(0) 点赞(17) 收藏(4)

BFC的定义

BFC（Block formatting context）块级格式化上下文，BFC里面的元素与外面元素隔离，使得里外元素的定位不会相互影响。

不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），有Block formatting context（BFC）和Inline formatting context（IFC）等。

BFC内部布局规则

BFC作为一种 Formatting Context，是脱离文档流的，其内部具有特殊的布局规则，掌握其内部的布局规则，对于理解BFC所产生的效果及应用都是有帮助的。

内部的Box（行盒和块盒）会在垂直方向，一个接一个地放置；
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；（应用：防止垂直方向margin重叠）
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（应用：两栏自适应）
BFC的区域不会与float box重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。（应用：清除浮动）

BFC触发条件

根元素
overflow不为visible的块元素
float
position:absolute或fixed
display:inline-block或table-cell或table-caption或flex

BFC的应用

防止垂直方向margin重叠

同一个 BFC 下垂直方向的margin会发生折叠，为避免外边缘的重叠，可以将两个容器放在不同的BFC中

清除浮动（BFC内部可以包含浮动元素）

父元素不设置高度，子元素设定浮动，则会脱离了文档流，发生高度坍塌，这时可以触发BFC，使得BFC内部包含浮动元素。

阻止元素被浮动元素覆盖，自适应布局

这个方法可以用来实现两列或三列自适应布局

二列布局

//左固定，右自适应
<div class="left"></div>
<div class="content"></div>

.left{
   height:100px;
   width:100px:
   float:left;
   background-color:#000000;
}

.content{
   height:100px;
   width:100000px://足够大
   display:table-cell;
   background-color:#000fff;
}

三列布局

//左右固定，中间自适应
<div class="left></div>
<div class="right"></div>
<div class="content"></div>
/*这里注意顺序*/

.left{
   height:100px;
   width:100px:
   float:left;
   background-color:#fff000;
}

.right{
   height:100px;
   width:100px:
   float:right;
   background-color:#000000;
}

.content{
   height:100px;
   width:100000px://足够大
   display:table-cell;
   background-color:#000fff;
}