一、 BFC是什么
-
block format context ，块级格式化上下文。
-
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。
二、BFC的特性
-
内部的box在垂直方向上会一个接一个的放置。
-
由垂直方向上由margin决定，但是同时属于同一个bfc区域下的两个相邻的box盒子之间的margin会重叠，以大的margin为准。
-
每个元素的左边外边距会和包含块的左边界想接触（bfc中元素不会超出）但是absolute定位是特例 绝对定位。
-
bfc区域不会和float元素重叠。
-
当计算高度时，浮动子元素也需要进行计算。
-
bfc就是一个独立隔离的容器，里面的子元素不会影响另外一个bfc的内容。
三、如何生成BFC
-
根元素（默认情况下只有根元素，即body一个块级上下文）。
-
浮动元素，float 除 none 以外的值。
-
定位元素，position为absolute，fixed。
-
display 为 inline-block，table-cell，table-caption其中之一。
-
overflow 为hidden，auto，scroll。
四、使用BFC解决问题
- 利用BFC避免margi重叠。
-
这是没有使用BFC导致的重叠时的样子
-
这是使用BFC之后的代码和效果
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: paleturquoise;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
overflow: hidden;
}
<p>盒子一</p>
<div><p>盒子二</p></div>
- 自适应两栏布局
- 每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
height: 300px;
background: paleturquoise;
text-align: center;
line-height: 300px;
font-size: 40px;
}
<div class="left">left</div>
<div class="right">right</div>
- 因为BFC的区域不会与float box重叠，所以我们让right单独成为一个BFC。
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
width: 300px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
height: 300px;
background: paleturquoise;
text-align: center;
line-height: 300px;
font-size: 40px;
overflow: hidden;
}
<div class="left">left</div>
<div class="right">right</div>
- 清楚浮动
- 当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。
.top {
border: 5px solid black;
width: 300px;
}
.box {
border: 5px solid yellowgreen;
width:100px;
height: 100px;
float: left;
}
<div class="top">
<div class="box"></div>
<div class="box"></div>
</div>
- 因为计算BFC的高度时，浮动元素也参与计算，所以我们给父节点添加BFC
.top {
border: 5px solid black;
width: 300px;
overflow: hidden;
}
.box {
border: 5px solid yellowgreen;
width:100px;
height: 100px;
float: left;
}
<div class="top">
<div class="box"></div>
<div class="box"></div>
</div>
五、BFC总结
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
-
因为BFC内部的元素和外部的元素绝对不会互相影响，所以当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠。
