css盒模型－BFC

BFC(邊距重疊解決方案)

一、BFC的基本概念：塊級格式化上下文

二、BFC的原理（說白了就是BFC的渲染規則）：

這個規則是什麼呢？我以爲你們能說出4點就夠了

第一個就是BFC能夠解決這個元素的垂直的邊距發生重疊的狀況
第二個是BFC的區域不會與浮動元素的box重疊，這個確定是用來清除浮動的。
第三個是BFC在頁面上是一個獨立的容器，外面的元素不會影響它裏面的元素，反過來，裏面的元素也不會影響到外面的元素。
第四個就是計算BFC高度的時候，浮動元素也會參與計算，如今比較抽象，等會經過代碼演示

三、怎麼建立BFC

剛纔給父元素加了一個 overflow:hidden就建立了一個BFC，那麼除了overflow:hidden，還有哪些寫法能建立BFC呢？

第一個是float的值不爲none，由於css的float值默認是none，只要設置了浮動就建立了BFC
第二個是position的值不是static或者relative，也就是建立了一個bfc，好比設置成absolute,fixed
第三個是display屬性是inline-box或者table-cell，跟table相關的這幾個，就建立了BFC
第四個是overflow,overflow爲auto,hidden，均可以建立BFC

四、BFC的使用場景有哪些？

 

 

第一部分，解決邊距的問題

<!--bfc垂直方向邊距重疊-->
<section id="margin">
　　<style>
　　　　#margin{
　　　　　　background: pink;
　　　　　　overflow: hidden;
　　　　}
　　　　#margin>p{
　　　　　　margin: 5px auto 25px;
　　　　　　background: red;
　　　　}
　　</style>
　　<p>1</p>
　　<p>2</p>
　　<p>3</p>
</section>

父級元素是建立了bfc的，如圖，咱們發現上邊距是5px，1和2和3之間的間隔是25px，由於1的下邊距和2的上邊距發生了重疊，重疊的時候根據取最大值的原則。若是我不想讓它重疊，就給子元素增長一個父元素，給這個父元素建立一個bfc就能解決這個問題

<!--bfc垂直方向邊距重疊-->
<section id="margin">
　　<style>
　　　　#margin{
　　　　　　background: pink;
　　　　　　overflow: hidden;
　　　　}
　　　　p{
　　　　　　margin: 5px auto 25px;
　　　　　　background: red;
　　　　}
　　</style>
　　<p>1</p>
　　<div style="overflow:hidden">
　　　　<p>2</p>
　　</div>
　　<p>3</p>
</section>

 

如圖，這樣咱們發現1和2，2和3之間的間隔變大了，沒有重疊

bfc的原理之一BFC能夠解決這個元素的垂直的邊距發生重疊的狀況 && overflow爲auto,hidden，能夠建立BFC

第二部分，解決佈局的問題

<!--跟佈局相關的bfc-->
<section id="layout">
　　<style>
　　　　#layout{
　　　　　　background: red;
　　　　}
　　　　#layout .left{
　　　　　　float: left;
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: pink;
　　　　}
　　　　#layout .right{
　　　　　　height: 110px;
　　　　　　background: #ccc
　　　　}
　　</style>
　　<div class="left"></div>
　　<div class="right"></div>
</section>

如圖，咱們發現，灰色的部分高度增高的時候，下面的部分侵入了左側的佔位，這個是float的一個特性，當左側沒有float元素的時候，依然會往左侵染，顯然，這不符合咱們佈局的目的，那麼就須要給右側的元素建立一個bfc,bfc的原理之一是bfc的元素不會與float元素相互重疊，如今是重疊的，那麼建立bfc之後就不會與float重疊了

<!--跟佈局相關的bfc-->
<section id="layout">
　　<style>
　　　　#layout{
　　　　　　background: red;
　　　　}
　　　　#layout .left{
　　　　　　float: left;
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: pink;
　　　　}
　　　　#layout .right{
　　　　　　height: 110px;
　　　　　　background: #ccc; 　　　　　　overflow: auto;
　　　　}
　　</style>
　　<div class="left"></div>
　　<div class="right"></div>
</section>

 

給right元素加一個overflow，建立一個bfc，如圖，狀況就變了，不會與左側元素重疊

bfc的原理之一，BFC的區域不會與浮動元素的box重疊 && overflow爲auto,hidden，能夠建立BFC

 

 

第三部分，計算高度

<!--浮動元素-->
<section id="float">
　　<style>
　　　　#float{
　　　　　　background:red
　　　　}
　　　　#float .float{
　　　　　　float: left;
　　　　}
　　</style>
　　<div class="float">我是浮動元素</div>
</section>

 

 

如圖，浮動元素的父元素高度爲0，沒有了背景色。這個就是子元素遇到浮動的時候，它的高度計算沒有包含進來，若是當這個父元素設置爲bfc的時候，子元素的高度也會參與到父元素的高度計算中來

<!--浮動元素-->
<section id="float">
　　<style>
　　　　#float{
　　　　　　background:red;
　　　　　　/* overflow: auto; */ 　　　　　　float: left;
　　　　}
　　　　#float .float{
　　　　　　float: left;
　　　　}
　　</style>
　　<div class="float">我是浮動元素</div>
</section>

給父元素加個overflow或者float建立了bfc，那麼就計算子元素高度，就算子元素是float，也會計算

bfc原理之一計算BFC高度的時候，浮動元素也會參與計算 && float的值不爲none，設置了浮動就建立了BFC