*學(xué)習(xí)筆記
????Formatting context(格式化上下文)是W3C CSS2.1規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。
????BFC即Block??Formatting Contexts(塊級(jí)格式化上下文)，它屬于上述中的其中一種規(guī)范，是 Web 頁(yè)面的可視化 CSS 渲染的部分，是塊級(jí)盒布局發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。具有BFC特性的元素可以看做是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響外面的元素，并且BFC具有普通容器所沒(méi)有的一些特性，可以解決一些布局上的問(wèn)題。
哪些樣式能觸發(fā)BFC來(lái)幫助我們解決哪些問(wèn)題？
觸發(fā)BFC的樣式：
? ? 浮動(dòng)元素：float除none以外的值
????絕對(duì)定位：position（absolute、fixed）
? ? display為inline-block、table-cells、flex
????overflow除了visible以外的值（hidden、auto、scroll）
BFC特性及應(yīng)用
解決margin疊加問(wèn)題
? ???<style>
????????.div1{width:?100px;height:?100px;background:?red;margin-bottom:?30px;}
????????.div2{width:?100px;height:?100px;background:?blue;margin-top:?30px;}
????</style>
????<div?class="div1"></div>
????<div?class="div2"></div>
????這里只會(huì)顯示一個(gè)30px的距離，上下的margin進(jìn)行了重疊。
????采用上述的觸發(fā)樣式可解決問(wèn)題，如
?????.box{overflow:?hidden;}
????<!--?.box{display:fixed;}-->
??????<div?class="box">
????????????<div?class="div1"></div>
????????</div>
????????<div?class="box">
????????????<div?class="div2"></div>
????????</div>
解決margin傳遞問(wèn)題
????<style>
????????#box1{ width:?200px;height:?200px;background:brown;}
????????#box2{ width:?100px;height:?100px;background:seagreen;margin-top:?100px; }
????</style>
????<div?id="box1">
????????<div?id="box2"></div>
????</div>
????這里兩個(gè)div都會(huì)向下100px,并不會(huì)只是box2向下。
????同樣的，給box1加上overflow：hidden等即可
解決浮動(dòng)問(wèn)題
?????.div1?{width:?200px; border:?1px?solid?black;
???????????/*?display:?inline-block;*/
??????????/*?overflow:?hidden;*/
????????}
? ? ?.div2?{width:?100px;height:?100px;background:?blue;float:?left;
????????}
? ? ? ?<div?class="div1?clear">
????????????<div?class="div2"></div>
????????</div>
解決覆蓋問(wèn)題
?略
