欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~
1 前言
在 Web 页面的 CSS 渲染中，BFC （Block Fromatting Context）块级格式化上下文，即 BFC 区域是一块独立的块级渲染区域，并且拥有一套渲染规则，来约束盒子布局，且与外部区域无关，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列
2 创建BFC
W3C 中对于 BFC 是这样说的：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）
简单粗暴来讲就是，满足以下任意一个条件或者多个条件即形成 BFC
- float 值不是 none
- overflow 值不是 visible
- display 值是 inline-block、table-cell、table-caption、flex 或 inline-flex
- position 值是 absoulute或fixed
所以只要满足了上述条件一个或多个，即形成 BFC
<div class = "container">
内容区域
</div>
.container {
overflow: hidden;
}
3 BFC的约束规则
浏览器对于BFC这块区域的约束规则如下：
- 在 BFC 区域，其内部元素会在垂直方向，一个接一个的排列，第一个元素的左上角顶部和 BFC 区域左上角顶部重合
- 且每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)，（对于从右到左的格式来说，则触碰到右边缘）
- 垂直方向上的距离由margin决定，相邻两个兄弟元素（例如上兄弟元素的margin-bottom和下兄弟元素的margin-top会发生重叠)，但与方向无关，水平方向也可以发生重叠，一般很少
- 每个元素都不会超过它的包含块，即不会超过 BFC 区域，浮动元素也不例外，而position为absolute的元素可以超出他的包含块边界
- BFC 区域是一块隔离的区域，与外界无关
BFC
4 BFC的应用
BFC 在页面布局中有很多应用，有很多其实已经用过，但是原理是要慢慢去领悟，例如：
- 垂直方向防止 margin 重叠
- 浮动元素会尽量接近左上角
- 为父元素设置
overflow: hidden;来清除浮动.......等
4.1 margin重叠
同一个 BFC 区域的两个相邻子元素的相邻的margin会发生重叠
4.1.1 margin嵌套重叠
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
.first{
margin:20px;
background:lightgreen;
width:100px;
height:100px;
}
ul{
/*display:inline-block;*/
margin:10px;
background:lightblue;
}
li{
margin:25px;
}
</style>
</head>
<body class="claro">
<div class="first"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
这里给了
.first盒子和ul和li的margin值分别为20px，10px，25px
在浏览器的控制面板调试如下图
此时，垂直方向上，
div.frist和ul两个盒子之间的距离是25px，由.first，ul，li三者中最大的margin决定
margin
解决 margin 嵌套重叠：
-
如上例子，将例子中的 注释部分
display:inline-block;去掉再去浏览器看看结果，就可以解决margin嵌套重叠的问题了，margin此时的值是二者之和30px了 -
原理是：将
ul形成了一个BFC区域，它和上面的div.first都是独立的BFC区域，互不影响。
ul BFC区域中的问题：
但是此时，去看看ul中的li的margin仍然是存在问题的，依然发生了margin嵌套重叠，因为此时li是属于ul这个封闭的BFC区域的
4.2 BFC中的浮动
当给一个父元素的子元素设置浮动的时候，父元素往往会发生高度塌陷，即父元素高度变为0
原因：浮动元素会脱离文档流（像绝对定位的元素也会脱离文档流），所以此时如果没有高度的容器的子元素是浮动元素，则该容器是不会被撑开的
常见的解决办法是：给父元素加
overflow: hidden;清除浮动原理：创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container {
background-color: green;
/*overflow: hidden;*/
/*display: inline-block;*/
/*display: table-cell;*/
/*display: flex;*/
/*display: table-caption;*/
/*display: inline-flex;*/
/*float: left;*/
/*float: right;*/
/*position: absolute;*/
/*position: fixed;*/
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
</body>
</html>
将上段代码复制到你的编译器中，打开浏览器，打开控制面板，我们看一下，两个字元素是浮动的，父元素div.container`是没有高度的，原因正如上面解释的一样
BFCmargin
解决办法：将我上面代码中的注释去掉任意一个，都可以解决这种父元素塌陷的问题
原理正如上面解释的一样，创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这种方式
此时再去打开浏览器看看，父元素div.container就有高度了
拓展：一般清除浮动最常用的方式，双伪元素清除浮动，若子元素需要浮动，则给其父元素加一个类clearfix使其形成BFC即可
.clearfix:before, .clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
overflow: hidden; // 形成 BFC
}
4.3 多栏布局
与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.left {
background: yellow;
float: left;
width: 180px;
}
.center {
background: blue;
overflow: hidden;
}
.right {
background: red;
width: 180px;
float: right;
}
</style>
</head>
<body class="claro">
<div class="container">
<div class="left">
<pre>
.left {
background: yellow;
float: left;
width: 180px;
}
</pre>
</div>
<div class="right">
<pre>
.right {
background: blue;
width: 180px;
float: right;
}
</pre>
</div>
<div class="center">
<pre>
.center {
background: red;
overflow: hidden;
height: 116px;
}
</pre>
</div>
</div>
</html>
这种布局的特点在于左右两栏宽度固定，中间栏可以根据浏览器宽度自适应
多栏布局1
多栏布局2
网友评论