BFC来由
理论来讲,包裹在父元素里的元素,不会影响父元素旁边的元素,但实际上并不总是如此,那有没有什么办法可以让里面的元素与外部真正隔离开来?可以试试BFC。
BFC是什么
BFC Block Formating Context 块级格式化上下文
,是一个独立渲染区域,主要是隔离保护作用。也就是说BFC会形成一个完全独立的空间,让空间里的子元素不会影响到外面的布局,
W3C官方解释
BFC决定元素如何对其内容进行定位,以及元素与其他元素的关系和相互作用。当涉及到可视化布局时,BFC提供了一个环境,HTML元素在环境中按照一定规则进行布局。
BFC作用/可解决什么问题
常用于
- 1.清除浮动:解决浮动元素令父元素高度塌陷问题
- 2.解决两栏自适应布局问题
- 3.解决外边距塌陷/重合问题
- 4.解决元素被浮动元素覆盖问题
常见的创建(触发)BFC方式
为元素设置一些CSS属性就能触发创建BFC这一空间。
- 1.
position
: absolute|fixed绝对和固定定位都脱标
- 2.
float
: 不是none浮动元素本身就是BFC
- 3.
overflow
: 不是visible - 4.
display
: flow-root | inline-block | flex | table-cell等table-xx - 5.根元素
<html>
实际上根元素也是BFC
ps. 注意display:table
不能触发BFC,混淆原因是Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC
补充:其他触发方式
- 1.
display
:inline-flex|grid|inline-grid - 2.
多列容器
:元素的column或column-width不为auto,包括column-count为1 - 3.
contain
:值为layout|content|paint
BFC应用场景
1.广告
很多网页有广告部分,也提供用户关闭按钮,这样的广告一般用BFC创建的。主要是因为点击关闭之后不能影响网页的布局,这样的广告经常设置position:absolute
,这样就可以给广告设置任意的定位(绝对定位脱标),这就是BFC。不过这样的广告,滚动到下面就会看不到内容了,可以用另一种创建BFC方式:就是设置position:fixed
。滚动以后广告依旧可见,这样的单独的区域就是BFC。
2.清除浮动: 解决浮动元素令父元素高度塌陷
父元素高度坍塌问题。这是因为浮动的子元素脱离了文档流,被提起来形成新的队列,这些被提来的队列无法触及父元素,父元素也无法检测到他们的存在而无法被撑开,看起来就是父元素高度坍塌。父元素后面的布局也会乱掉
这时可以给父元素设置CSS属性(常用display和overflow)来创建BFC,将子元素隔离在父元素内。BFC容器里的元素绝对不会影响到外面的元素,为了保证这一规则,触发了BFC的父元素计算高度时,不得不让子元素参与进来进来,变相实现清除内部浮动目的。
以上是变相清除浮动的方法,但有的时候出于布局需要,无法给父元素设置这些css属性
,解决父元素高度坍塌问题,可以用以下方法
- (1)将父元素也浮动起来,让父元素自适应子元素高度
- 优点:代码量少
- 缺点:这是将错就错的方法,会影响父元素后面的元素布局
- (2)给父元素添加固定高度,但这方法只适用于已知子元素高度的情况
- 优点:没有学习成本
- 缺点:不灵活、难以维护
- (3)在浮动的子元素后面,增加一个空元素,并给这元素设置
clear:both
来清除浮动- 优点:简单易懂,容易掌握
- 缺点:会增加无意义的标签,不利于以后维护
- (4)为浮动的最后一个子元素设置伪元素
::after{clear:both}
这个方法原理同(3),不过适用伪类替代空元素- 优点:结构语义完全正确
- 缺点:复用不当会导致代码量增加
3.解决自适应布局问题
实现两栏布局自适应的效果
一般需要左侧边栏定宽,右侧主体随页面宽度自适应变化
,利用块级元素的特性以及浮动实现。
利用块级元素尽可能占满一行的特性,使得右边的元素随着页面的宽度变化而变化。又利用浮动的特性,让左侧元素覆盖在右边元素的上方,同时挤开下方元素的内容,让页面看起来像两栏布局的效果。
但随着右边文字的增加,超出了左边元素的高度之后,文字就会流到最左侧,看起来就是文字环绕左侧元素,这显然不是我们希望的效果
因此这里为右侧触发BFC,触发了BFC的容器,就是页面上一个完全隔离开来的容器,容器中的子元素不会影响到外边的布局,为了保证这一规则,触发BFC的右侧元素将内部元素和左侧浮动元素隔离开来,不得不形成这样左右完全隔离的两栏。同时如果右侧元素依旧是块级元素,那么它尽可能占满一行的特性还在,这样就保证右侧元素自适用。
其他实现自适应方法
模型还是两元素,左边元素定宽(假设宽为200px)
- (1)左边元素左浮动,右边设置margin-left:200px;
- (2)左边设置绝对定位,右边设置margin-left:200px;
- 左边得定一个位置:可以左上下线为0,右线不设置
- (3)右侧元素设置顶线和右线为0(top right),左线200px,盒子宽度100%
4.解决外边距塌陷(外边距重合)
外边距塌陷又叫外边距重合
。
兄弟元素之间的外边距,在垂直方向
会取最大值而不是取和,如果两个边距相等则取其一
解决:将两个div放在两个不同的BFC中或将其中一个div触发BFC,那么这两个BFC的内容不会相互干扰。
其他解决方案
- 用padding来代替margin
- 优点:简单易懂
- 缺点:如果本来设计就需要设置padding,就无法代替。
5.阻止元素被浮动元素覆盖
给正常元素触发BFC,这样两个元素就不会互相干扰。
BFC 约束规则/布局规则
BFC是一块渲染区域,那这块渲染区域到底在哪,占据多大面积,这些由生成BFC的子元素决定。
- 1.三种定位方案中,BFC属于普通流,BFC子元素会
一个接一个布局,不会重叠
。 - 2.
属于同一个BFC
的两相邻Box的margin会发生重叠,与方向无关
- 3.左向右布局时,每个元素的
左外边距
与包含块的左边界相接触- 也就是说 BFC中子元素不会超出他的包含块
- 但position为absolute的元素可以超出他的包含块边界
- 4.BFC的区域不会与float的元素区域重叠
- 因为浮动元素本身就是BFC
- 5.计算BFC的高度时,浮动子元素也参与计算
BFC总结
触发BFC的属性有很多但选择慎重,要考虑实际情况,避免影响其他元素布局。
欢迎分享与交流,全文转载就不必啦!