1.什么是BFC
BFC(Block formatting context) 直译为"块级格式化上下文"。
简单概括:如果给一个div添加overflow:hidden;
div内部的浮动元素就会被它包裹起来,并且与div外部毫不相干。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
建议:记住上面的简单概括,方面记忆和理解
2.产生BFC的条件
不是所有的元素模式都能产生BFC,w3c 规范:
display 属性为 block, list-item, table 的元素,会产生BFC。
值得注意的是,display属性,比如 line 等等,他们创建的是 IFC ,暂且不研究。
什么条件下会触发元素产生BFC呢?有四种情况:
- float属性不为none;
- position为absolute或fixed;
- display为inline-block, table-cell, table-caption, flex, inline-flex;
- overflow不为visible。
3.BFC的特性
我们已经了解了产生BFC的元素和触发条件,那么我们难免心中就会有一个疑问:BFC是用来干嘛的呢?
不要急,在了解BFC的用途前,我们先来了解下BFC的特性,通过了解特性,才能更好的去理解BFC的作用。
BFC布局规则特性:
- 在BFC中,盒子从顶端开始垂直地一个接一个地排列
- 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
- 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘
- BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘
- 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度
苦涩难懂的特性不理解不要紧,我们先有个印象,根据用途去深一步理解。
4.BFC的用途
BFC能用来做什么?常用用途1和2~~~
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden
样式,对于IE6加上zoom:1就可以了。
主要用到计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
解释:
若不创建BFC,父元素的高度为零;而通过overflow: hidden
使父元素产生BFC,根据BFC的特性,计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
,此时,父元素就被“撑开了”。
(2) 解决外边距合并问题
外边距合并的问题。
主要用到盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
解释:
属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠了。
(3) 制作右侧自适应的盒子问题
主要用到普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文