BFC——格式化上下文。
這到底是個(gè)啥？
首先來(lái)回顧一下css定位機(jī)制。
CSS 有三種基本的定位機(jī)制:普通流、浮動(dòng)和絕對(duì)定位。 BFC屬于普通流。
具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，是一個(gè)獨(dú)立的渲染區(qū)域。簡(jiǎn)單來(lái)說就是一個(gè)獨(dú)立的盒子，并且這個(gè)盒子里的布局不受外部影響，也不會(huì)影響到外部元素。
具有BFC特性的容器有以下特點(diǎn)：
- Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
- BFC是頁(yè)面一個(gè)獨(dú)立的容器，容器里面的元素不會(huì)影響到外面的元素，反之亦然。
- 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。
- BFC內(nèi)部的盒子Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
- BFC的區(qū)域不會(huì)與浮動(dòng)盒子float box重疊。
哪些情況可以觸發(fā)BFC?
- body根元素。
- float屬性不為none，也就是left/right。
- position為absolute或fixed。
- display為inline-block, table-cell, table-caption, flex, inline-flex。
- overflow不為visible，也就是auto/hidden。
BFC可以解決什么問題？
- 清除浮動(dòng)
回顧一下我們?yōu)樯兑宄?dòng)？主要是為了避免出現(xiàn)父元素高度塌陷的問題。
高度塌陷示例：
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
</html>
屏幕快照 2020-04-12 下午3.23.12.png
我們把父元素的邊框設(shè)置為黑色、1px，但發(fā)現(xiàn)父元素中的子元素沒有被這個(gè)邊框包裹起來(lái)，出現(xiàn)了高度坍塌。
解決辦法之一是使用clear:both來(lái)清除浮動(dòng)：
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="clear"></div>
</div>
</body>
</html>
屏幕快照 2020-04-12 下午3.30.06.png
可以看到，問題解決了。
另一個(gè)方法是把父元素變成BFC容器，給父元素加上overflow:hidden的樣式：
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
overflow: hidden;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
</html>
屏幕快照 2020-04-12 下午3.32.40.png
- 邊距重疊問題
<html>
<head>
<title>test</title>
<style type="text/css">
.box1 {
background: blue;
width: 200px;
height: 200px;
margin: 20px;
}
.box2 {
background: red;
width: 200px;
height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
問：box1和box2的間隔有多寬？20+20=40(px)？，錯(cuò)了，因?yàn)榘l(fā)生了邊距重疊，所以兩者之間的間隔只有20px。
屏幕快照 2020-04-12 下午3.37.12.png
出現(xiàn)問題的原因是：box1和box2同屬于BFC容器body，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
那么解決方法顯而易見：把它們放在不同的BFC里面就ok了。
<html>
<head>
<title>test</title>
<style type="text/css">
.bfc {
overflow: hidden;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
margin: 20px;
}
.box2 {
background: red;
width: 200px;
height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div class="bfc">
<div class="box1"></div>
</div>
<div class="bfc">
<div class="box2"></div>
</div>
</body>
</html>
屏幕快照 2020-04-12 下午3.49.47.png
- 防止被浮動(dòng)元素覆蓋
<html>
<head>
<title>test</title>
<style type="text/css">
.box2 {
background: red;
width: 100px;
height: 100px;
float: left;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
</html>
屏幕快照 2020-04-12 下午4.22.09.png
box1被浮動(dòng)元素box2蓋住了。
把box1改為BFC試試：
<html>
<head>
<title>test</title>
<style type="text/css">
.box2 {
background: red;
width: 100px;
height: 100px;
float: left;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
</html>
屏幕快照 2020-04-12 下午4.24.25.png
現(xiàn)在兩者是并列的，box1不會(huì)被覆蓋。
