1.先了解最常見定位方案
1洲胖、普通流
元素按照其在 HTML 中的先后位置至上而下布局
行內(nèi)元素水平排列，直到當(dāng)行被占滿然后換行，塊級(jí)元素則會(huì)被渲染為完整的一個(gè)新行
所有元素默認(rèn)都是普通流定位
2啡捶、浮動(dòng)
元素首先按照普通流的位置出現(xiàn)谦絮，然后根據(jù)浮動(dòng)的方向盡可能的向左邊或右邊偏移
3、絕對(duì)定位
元素會(huì)整體脫離普通流，因此絕對(duì)定位不會(huì)對(duì)其兄弟元素造成影響
2.BFC講解
BFC是屬于普通流的，我們可以把BFC看成頁面的一塊渲染區(qū)捞镰，他有自己的渲染規(guī)則，簡(jiǎn)單來說就是BFC可以看做元素的屬性顽悼，當(dāng)元素有了BFC這個(gè)屬性曼振，這個(gè)元素可以看做隔離了的容器几迄，容器里面的元素不會(huì)在布局上影響到外面的元素蔚龙。
1.BFC特性
每一個(gè)BFC區(qū)域只包含其子元素，不包含其子元素的子元素
每一個(gè)BFC區(qū)域相互獨(dú)立映胁，互不影響
2.如何觸發(fā)BFC
也就是說怎么給這個(gè)元素添加BFC屬性木羹，它需滿足下列任一條件。
1. 根元素(<html>)
2. 設(shè)置float浮動(dòng)解孙，不包含none
3. 絕對(duì)定位元素 (元素的 position 為 absolute 或 fixed)
4. display 為 inline-block坑填、table-cell、table-caption弛姜、table脐瑰、table-row、table-row-groutable-header-group廷臼、table-footer-group苍在、inline-table绝页、flow-root、flex 或 inline-flex寂恬、grid 或 inline-grid
5. 設(shè)置overflow续誉，不為visible
6. contain 值為 layout、content 或 paint 的元素
7. 多列容器（column-count 或 column-width (en-US) 值不為 auto初肉，包括column-count 為 1）
3.BFC的作用
1.第一個(gè)作用：避免外邊距重疊
看個(gè)案例（面試也會(huì)出現(xiàn)）
.box{
width: 200px;
height: 200px;
background: #5aa878;
margin: 100px;
}
<body>
<div class="box"></div>
<div class="box"></div>
</body>
大家認(rèn)為上下盒子間距是200px吧
結(jié)果是上間距100px的酷鸦，這不是bug,這是一種規(guī)范。塊的上外邊距margin-top和下外邊距margin-bottom會(huì)合并為單個(gè)邊距牙咏，如果兩個(gè)邊距相等取其中一個(gè)臼隔，若大小邊距不一樣區(qū)最大邊距
如何解決呢？
只需要將這兩個(gè)div放置不同的BFC中妄壶，那么兩個(gè)BFC的內(nèi)容互不干擾躬翁。把代碼修改如下：
.box{
width: 200px;
height: 200px;
background: #5aa878;
margin: 100px;
}
.container{
overflow: hidden;
}
<div class='container'>
<div class="box"></div>
</div>
<div class="container">
<div class="box"></div>
</div>
給這兩個(gè)box給各自一個(gè)div包裹，然后給這個(gè)div添加 overflow: hidden;屬性觸發(fā)container的BFC盯拱，最后就可以看到理想的結(jié)果200px
2.第二個(gè)作用：清除浮動(dòng)
啥也不說上代碼盒发，看看是不是你想的那樣
.container{
border: 2px solid yellowgreen;
}
.content{
width: 100px;
height: 100px;
background: #47cabf;
margin: 100px;
float: left;
}
<div class="container">
<div class="content"></div>
</div>
你們想的應(yīng)該是一個(gè)邊框包裹著一個(gè)100px的方塊，可結(jié)果不盡人意····
我們給子元素添加了浮動(dòng)導(dǎo)致子元素脫離了文檔流狡逢，所以只剩下2px的邊框了宁舰。
如何解決？
同樣我們給父容器添加BFC屬性奢浑，添加overflow: hidden;屬性觸發(fā)BFC蛮艰。這樣就起到清除浮動(dòng)的效果。
.container{
border: 2px solid yellowgreen;
overflow: hidden;
}
.content{
width: 100px;
height: 100px;
background: #47cabf;
margin: 100px;
float: left;
}
<div class="container">
<div class="content"></div>
</div>
這樣就可以了雀彼。
3.防止元素被浮動(dòng)元素覆蓋
先上才藝壤蚜，給兩個(gè)盒子設(shè)置寬高顏色，其中一個(gè)設(shè)置浮動(dòng)徊哑。
.box1{
width: 100px;
height: 100px;
background: blue;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: red;
}
<div class="box1"></div>
<div class="box2"></div>
你們想的結(jié)果可能是兩個(gè)盒子獨(dú)占一行袜刷，可是結(jié)果~~~
16e24a8bc84f40a292912e1e0e49975f.png
這里可以看到浮動(dòng)元素覆蓋了沒有添加浮動(dòng)的元素，如果想不被覆蓋莺丑，可以觸發(fā)正常的元素的BFC即可著蟹。所有在第二個(gè)元素添加overflow: hidden;屬性，這樣這兩個(gè)屬性就互不干擾梢莽。
.box1{
width: 100px;
height: 100px;
background: blue;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: red;
overflow: hidden;
}
<div class="box1"></div>
<div class="box2"></div>
這樣就正常了萧豆。
4.防止父子元素外邊距塌陷
上菜~~
.box1{
width: 200px;
height: 200px;
background: blue;
}
.box2{
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
}
<div class="box1">
<div class="box2"></div>
</div>
大家想的結(jié)果是父元素距離子元素20px,然而~~
76c54de588154601b058273db4f9a31f.png
給子元素添加margin-top:50px后，影響了父元素昏名，給父元素添加BFC屬性即可涮雷。
.box1{
width: 200px;
height: 200px;
background: blue;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
}
<div class="box1">
<div class="box2"></div>
</div>
6.總結(jié)
一個(gè)BFC區(qū)域只包含它的子元素，不包含其子元素的子元素轻局。
成為一個(gè)BFC區(qū)域要滿足一定的條件洪鸭。
不同的BFC區(qū)域相互獨(dú)立膜钓，互不影響。
