mfc 應用程序類型怎麼選-tft每日頭條

BFC(block formatting context)：塊級格式化上下文，一個獨立容器，決定了元素如何對其内容進行定位,以及與其他元素的關系和相互作用。一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box内的元素會以不同的方式渲染,也就是說BFC内部的元素和外部的元素不會互相影響。

BFC布局規則：

1.内部的Box會在垂直方向，一個接一個地放置。

2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

3.每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

4.BFC的區域不會與float box重疊。

5.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

6.計算BFC的高度時，浮動元素也參與計算

哪些元素會生成BFC?

1.根元素

2.float屬性不為none

3.position為absolute或fixed

4.display為inline-block, table-cell, table-caption, flex, inline-flex

5.overflow不為visible( hidden,scroll,auto, )

BFC有什麼用？

1.自适應兩欄布局：

根據BFC布局規則第3條：

每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。

根據BFC布局規則第四條：

BFC的區域不會與float box重疊。

我們可以通過通過觸發main生成BFC，來實現自适應兩欄布局。

.main { overflow: hidden; }

當觸發main生成BFC後，這個新的BFC不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：

2. 清除内部浮動

.par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width: 100px; height: 100px; float: left; } <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body>

根據BFC布局規則第六條：

計算BFC的高度時，浮動元素也參與計算

為達到清除内部浮動，我們可以觸發par生成BFC，那麼par在計算高度時，par内部的浮動元素child也會參與計算。

.par { overflow: hidden; }

效果如下：

3. 防止垂直 margin 重疊

<style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style> <body> <p>Haha</p> <p>Hehe</p> </body>

兩個p之間的距離為100px，發送了margin重疊。

根據BFC布局規則第二條：

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

我們可以在p外面包裹一層容器，并觸發該容器生成一個BFC。那麼兩個P便不屬于同一個BFC，就不會發生margin重疊了。

<style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style> <body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div> </body>

效果：間距變大

,