BFC 布局规则(特性)
(1)在 BFC 下, 内部的 Box 会在垂直方向一个接一个的放置
- .main {
- width: 200px;
- height: 200px;
- border: 2px solid #000;
- overflow: hidden;
- }
- .box1 {
- height: 50px;
- background: blue;
- }
- .box2 {
- height: 50px;
- background: yellow;
- }
效果如下:
(2)Box 垂直方向的距离由 margin 决定, 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- .main {
- width: 200px;
- height: 200px;
- border: 2px solid #000;
- overflow: hidden;
- }
- .box1 {
- background: blue;
- margin: 20px 0;
- }
- .box2 {
- background: yellow;
- margin: 20px 0;
- }
结果如下图:
可以看到, box1 与 box2 之间的距离为 20px, 即, 会发生折叠
(3)在 BFC 中, 每一个盒子的左外边缘 (margin-left) 会触碰到容器的左边缘(border-left), 即使存在浮动也是如此
在 main 中添加如下代码
box3 的样式如下:
- .box3 {
- width: 200px;
- height: 50px;
- background: #999;
- float: left;
- }
效果如下:
(4)BFC 区域不会与浮动的元素重叠
一般情况下, 浮动元素会脱离普通文档流, 覆盖其它元素, 例如:
- .left {
- float: left;
- width: 100px;
- height: 150px;
- background: blue;
- }
- .main {
- width: 200px;
- height: 200px;
- background: red;
- }
效果如下所示
将 main 设置为 BFC
可以看出, BFC 区域不会与浮动的元素重叠
(5)计算 BFC 的高度时, 浮动元素也参与计算
触发 BFC 的条件
满足以下条件的其中一条, 都会触发 BFC
(1)body 根元素
(2)浮动元素, float 除 none 以外的值
(3)绝对定位元素: position(absolutefixed)
(4)display 为以下其中之一的值: inline-block,table-calltable-captionfixeinline-flex
(5)overflow 除了 visible 以外的值(hidden,auto,scroll)
BFC 的应用
(1)解决浮动塌陷问题
什么是塌陷
当父元素只包含浮动元素, 且父元素未设置高度和宽度的时候, 由于子元素脱离了文档流, 父元素里没有内容, 那么它的高度就会塌缩为零
举个例子:
样式为:
- .parent {
- border: 2px solid #000;
- }
- .child {
- width: 200px;
- height: 200px;
- float: left;
- background: red;
- }
结果如图所示
由于 BFC 区域不会与 float box 重叠, 所以可以为其父元素创建 BFC, 修改 parent 的内容如下:
- .parent {
- border: 2px solid #000;
- overflow: auto;
- }
结果如下:
(2)同一个 BFC 下, 盒子之间的外边距会重叠的问题
解决办法: 将每个盒子都设置为 BFC
来源: https://www.2cto.com/kf/201803/727296.html