一柜蜈、什么是BFC
BFC全稱塊級(jí)格式上下文，是Web頁(yè)面的可視CSS渲染的一部分指巡，是塊盒子的布局過(guò)程發(fā)生的區(qū)域淑履，也是浮動(dòng)元素與其他元素交互的區(qū)域。
它決定了元素對(duì)其內(nèi)容如何進(jìn)行定位以及其他元素的關(guān)系和相互作用藻雪，當(dāng)涉及到可視化布局的時(shí)候秘噪，BFC提供一個(gè)環(huán)境，html元素在這個(gè)環(huán)境中按照一定的規(guī)則進(jìn)行布局阔涉±峦蓿可以理解為BFC是一個(gè)獨(dú)立的容器，
二瑰排、觸發(fā)BFC的條件
1.根元素（html）
2.浮動(dòng)元素（元素的float不是null）
3.絕對(duì)定位元素 （元素的position是absolute或fixed）
4.行內(nèi)塊元素（元素的display 為inline-block）
5.表格單元格 （元素的display為table-cell贯要，html表格單元格默認(rèn)為該值）
6.表格標(biāo)題 （元素的display為table-caption，html表格標(biāo)題默認(rèn)是該值）
7.匿名表格單元格元素（元素的display為table椭住，table-row崇渗，table-row-group，table-header-group，table-footer-group（分別是html table row宅广，tbody葫掉，thead，tfoot的默認(rèn)屬性）或inline-table）
8.overflow不是visible的塊元素
9.display是flow-root的元素（無(wú)任何副作用的創(chuàng)建BFC跟狱，新增屬性）
10.contain值為layout俭厚、content、paint的元素
11.彈性元素（display為flex或inline-flex元素的直接子元素）
12.網(wǎng)格元素 （display為grid或inline-grid元素的直接子元素）
13多列容器（元素的column-count或column-width不為auto驶臊，包括column-count為1）
14.column-span為all的元素始終會(huì)創(chuàng)建一個(gè)新的BFC挪挤，即使該元素沒(méi)有包括在一個(gè)多列元素中
三、BFC的作用
BFC對(duì)浮動(dòng)定位和清楚浮動(dòng)都很重要关翎，浮動(dòng)定位和清楚浮動(dòng)只會(huì)應(yīng)用于同一個(gè)BFC內(nèi)的元素扛门。浮動(dòng)不會(huì)影響其他BFC中元素的布局，而清楚浮動(dòng)只能清楚同一BFC中在它前面的元素的浮動(dòng)纵寝。外邊距折疊也只會(huì)發(fā)生在屬于同一BFC的塊級(jí)元素之間
實(shí)際作用：
??<body>
????<div?class="box">
??????<div?class="float">
????????float
??????</div>
??????<div?class="inner">
????????inner
??????</div>
????</div>
????<div?class="second">
??????other?content
????</div>
??</body>
body中定義了兩個(gè)div并列论寨，第一個(gè)div中包含float元素和另一個(gè)div
float:left 本身就是創(chuàng)建BFC的條件。所以本文中float元素本身就是一個(gè)BFC元素
??<style>
??????.box?{
????????width:?100%;
????????color:?pink;
????????border:?2px?solid?#444;
??????}
??????.box?>?.float?{
????????height:?50px;
????????width:?200px;
????????float:?left;
????????border:?2px?solid?#666;
??????}
??????.box?>?.inner?{
????????display:?inline;
??????}
??????.second?{
????????width:?100%;
????????border:?2px?solid?palegreen;
??????}
????</style>
效果：
如圖float元素超出了第一個(gè)div 爽茴，覆蓋了第二個(gè)div葬凳，這是我們不希望看到的，所以我們需要清楚浮動(dòng)帶來(lái)的影響闹啦。這是BFC的作用沮明。
設(shè)置float元素的父元素為BFC環(huán)境，具體做法是在.box的style中添加二中觸發(fā)BFC條件的屬性窍奋。本例中使用overflow:hidden
???.box?{
????????width:?100%;
????????color:?pink;
????????border:?2px?solid?#444;
????????overflow:?hidden;
??????}
效果圖：
然后box就和float一樣高了
