BFC
BFC(Block Formatting Context)叫做“块级格式化上下文”。BFC的布局规则如下:
-
内部的Box会在垂直方向,一个接一个地放置。
-
Box垂直方向的距离由
margin
决定。属于同一个BFC的两个相邻Box的margin
会发生重叠 -
每个元素的左外边缘(
margin-left
), 与包含块的左边(contain box left
)相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。 -
BFC的区域不会与
float box
重叠。 -
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时,浮动元素也参与计算
怎样形成一个BFC?
1.根元素;
2.float的属性不为none;
3.position为absolute或fixed;
4.display为inline-block,table-cell,table-caption,flex;
5.overflow不为visible
BFC用处
1.清除浮动
<div class="outer">
<div class="inner"></div>
</div>
.outer{
border: 2px solid yellow;
width: 300px;
}
.inner{
float: left;
width: 100px;
height: 100px;
background: aqua
}
效果图如下:
可以看到,父div没有被撑开。
回顾一下BFC规范中的第六条:
计算BFC的高度时,浮动元素也参与计算。
所以我们需要将父div触发为BFC,也就是将其overflow设为hidden:
.outer{
border: 2px solid yellow;
width: 300px;
overflow: hidden;
}
.inner{
float: left;
width: 100px;
height: 100px;
background: aqua
}
效果图如下:
2. 布局:自适应两栏布局
<div class="aside"></div>
<div class="main"></div>
div{
width: 300px;
}
.aside{
width: 100px;
height: 100px;
float: left;
background: salmon
}
.main{
height: 200px;
background: seagreen
}
效果图如下:
这正满足了规范的第三条:
每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此。
所以如果我们需要将大的区域撑到小的右边边,就需要利用规范的第四条:
BFC的区域不会与float重叠。
也就是说我们需要创造BFC区域。我们通过将大的区域的overflow设为hidden来触发BFC:
div{
width: 300px;
}
.aside{
width: 100px;
height: 100px;
float: left;
background: salmon
}
.main{
height: 200px;
background: seagreen;
overflow: hidden
}
效果图如下:
3. 防止垂直margin合并
<div class="one"></div>
<div class="two"></div>
.one{
width: 200px;
height: 100px;
background: salmon;
margin-bottom:20px;
}
.two{
width: 200px;
height: 100px;
background: seagreen;
margin-top: 30px;
}
效果图如下:
.top
和.bottom
中间加起来有50px的margin值,但是我们只能看到30px。这是因为他们的外边距相遇发生了合并。
BFC规范的第二条:
盒子垂直方向的距离由margin决定,属于用一个BFC的两个相邻Box的上下margin会发生重叠。
说明两者属于同一个BFC,所以我们需要两个div不属于同一个BFC。
为第二个div套一个父亲div,然后讲其overflow设为hidden来激活一个BFC就可以使margin不再重叠。
<div class="one"></div>
<div class="wrap">
<div class="two"></div>
</div>
.one{
width: 200px;
height: 100px;
background: salmon;
margin-bottom:20px;
}
.wrap{
overflow: hidden;
}
.two{
width: 200px;
height: 100px;
background: seagreen;
margin-top: 30px;
}
效果图如下: