BFC:Box Formatting Context(块级格式上下文)的缩写。通俗来讲,就是管理块级元素的。
一个块级元素开启BFC后,可以管理块内的所有元素的排版布局,但是不能管理自己本身
BFC的布局规则
a.内部的Box会在垂直方向,一个接一个的放置(块级元素独占一行)
b.BFC的 区域不会与float box重叠------两列布局:左边固定右边自适应(可以开启BFC)
c.内部的Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻的margin会发生重叠
垂直方向上margin重叠满足的三个条件:垂直排列、相邻、属于同一个BFC
d.计算BFC的高度时,浮动元素也参与计算(清除浮动 ie6 7开启haslayout)
元素浮动脱离文档流,正常的元素是感知不到浮动元素的存在,
但是开启BFC的元素可以感知到浮动元素的存在,进而可以进行高度的计算
e . BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
BFC什么时候会出现(哪些元素会生成BFC?)
a.根元素 HTML
b.float属性不为none(浮动的元素)
c.position属性值为absolute或者fixed(绝对定位或固定定位)
d.overflow属性值不为visible (溢出处理)
e.display的值为:inline-block、table-cell、flex等
BFC牵扯到一个非常重要的问题:清除浮动--让浮动的子元素撑开父级元素的高度
清除浮动的方法
1)直接给父级元素填加高度(扩展性不好)
2) 开启BFC
a.给父级元素添加 overflow:hidden、float:left
b . 子元素position:absolute 父元素position:relative
3) 用br标签 <br clear="all"/> 不符合结构 样式 行为三者分离的要求
4) 空标签 --- 在要清除浮动的元素后面放一个空的div,并给行内样式clear:both CSS代码冗余 增加浏览器的负担
5) 伪元素 ::after(最常用且性能最高)
.clear{
*zoom: 1;
}
.clear::after{
display: block;
content: "";
clear: both;
}
注意:浮动和定位盒子的特性----高宽由内容撑开