什么是BFC?
BFC 是什么?
BFC
全称:Block Formatting Context
, 名为 “块级格式化上下文”。
W3C
官方解释为:BFC
它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context
提供了一个环境,HTML
在这个环境中按照一定的规则进行布局。
简单来说就是,BFC
是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC
呢,BFC
可以看做是一个CSS
元素属性
如何触发 BFC?
这里简单列举几个触发BFC
使用的CSS
属性
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
BFC 的规则
BFC
就是一个块级元素,块级元素会在垂直方向一个接一个的排列BFC
就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签- 垂直方向的距离由 margin 决定, 属于同一个
BFC
的两个相邻的标签外边距会发生重叠 - 计算
BFC
的高度时,浮动元素也参与计算
BFC 解决了什么问题
1.使用 Float 脱离文档流,高度塌陷
<style> .box { margin: 100px; width: 100px; height: 100px; background: red; float: left; } .container { background: #000; } </style> <div class="container"> <div class="box"></div> <div class="box"></div> </div>
效果如下:
可以看到上面效果给box
设置完float
结果脱离文档流,使container
高度没有被撑开,从而背景颜色没有颜色出来,解决此问题可以给container
触发BFC
,上面我们所说到的触发BFC
属性都可以设置。
修改代码
<style> .box { margin: 100px; width: 100px; height: 100px; background: red; float: left; } .container { background: #000; display: inline-block; } </style> <div class="container"> <div class="box"></div> <div class="box"></div> </div>
此时效果如下:
2.Margin 边距重叠
<style> .box { margin: 10px; width: 100px; height: 100px; background: #000; } </style> <div class="container"> <div class="box"></div> <div class="box"></div> </div>
效果如下:
可以看到上面我们为两个盒子的margin
外边距设置的是10px
,可结果显示两个盒子之间只有10px
的距离,这就导致了margin
塌陷问题,这时margin
边距的结果为最大值,而不是合,为了解决此问题可以使用BFC
规则(为元素包裹一个盒子形成一个完全独立的空间,做到里面元素不受外面布局影响),或者简单粗暴方法一个设置margin
,一个设置padding
。
修改代码
<style> .box { margin: 10px; width: 100px; height: 100px; background: #000; } </style> <div class="container"> <div class="box"></div> <p><div class="box"></div></p> </div>
效果如下:
3.两栏布局
<style> div { width: 200px; height: 100px; border: 1px solid red; } </style> <div style="float: left;"> 两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局 </div> <div style="width: 300px;"> 我是码云笔记,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到 </div>
效果如下:
可以看到上面元素,第二个div
元素为300px
宽度,但是被第一个div
元素设置Float
脱离文档流给覆盖上去了,解决此方法我们可以把第二个div
元素设置为一个BFC
。
修改代码
<style> div { width: 200px; height: 100px; border: 1px solid red; } </style> <div style="float: left;"> 两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局 </div> <div style="width: 300px;display:flex;"> 我是码云笔记,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到,如有帮助请转发给更多人看到 </div>
效果如下:
结语
以上就是今天码云笔记为大家解答的什么是 BFC,感谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎下方留言指正。
码云笔记 » 什么是BFC?