實例分析CSS中的BFC

前言

咱們知道CSS的基礎模型爲盒子，包括了塊盒、行內盒、匿名盒，由display屬性決定。那麼盒子排布固然也有相關的一套標準，實現視覺格式化。今天要說起到的BFC就是塊格式化上下文。

定義

---

它是由CSS2.1規範定義的，全稱爲Block Formatting Context。通俗來理解就是當元素被定義爲塊格式上下文的話，自身就造成了一個獨立的盒子，讓處於BFC內部的元素與外部的元素相互隔離

如何建立BFC

• 浮動
• 絕對定位
• 行內塊級元素
• overflow的值不爲visible的元素
• 彈性盒子

整體來說咱們建立BFC是爲了生成一個獨立區域使得和其餘盒子不互相干擾，那麼咱們來看一下實例

實例

---

重疊盒子

三個盒子來體現BFC，默認狀況這邊就不描述了

<style> * { margin: 0; padding: 0; } .left { background: yellowgreen; <!--這邊加上透明色更好查看--> opacity: 0.5; width: 200px; height: 200px; <!--浮動建立BFC元素--> float: left; } .right { background: pink; width:400px; height: 100px; } .box { background: gray; height: 100%; margin-left: 50px; } </style>
<div class="box">
    <div class="left">左邊盒子</div>
    <div class="right">右邊盒子</div>
</div>
複製代碼

效果圖以下：

• 很明顯咱們能夠看到浮動元素脫標直接覆蓋到普通盒子上面，最主要的是它具備塊格式上下文所佔據的位置是自身的獨立空間不受其餘盒子外部盒子影響，因此咱們能夠看到右邊盒子內容區域直接被「擠開了」
• 因爲自身脫標父級盒子高度的定義也是以右邊盒子爲準，致使左邊溢出父級

---

當咱們將父級盒子建立BFC時那麼它造成獨立空間以後(前面所說任意建立方式都行,如果flex實現的話內部盒子也都有各自獨立空間)固然不會讓本身子元素「跑出去」，這樣的話就能夠更好的解釋BFC特性，經過BFC咱們就能夠更好的理解到清除浮動的原理以及意義。

效果圖以下：

margin塌陷現象

代碼就省略了直接在上面demo中操做，在右邊盒子之中加入三個標準盒子

.children {
    height: 20px;
    width: 20px;
    margin: 10px;
    background: #fff;
}
複製代碼

能夠看到這邊產生了margin塌陷現象（在盒子之間margin重疊了），要說其緣由這邊小編也不是很清楚，但要解決這樣的問題就是要建立BFC來實現盒子獨立出來而後就能夠解決。

總結

在對BFC的查漏補缺以後對以前的一些知識以及盒子的視覺格式化有了必定的瞭解，這幾個簡明的案例雖然很醜陋（哈哈哈哈），但也可以說明問題了。

ending...