這篇文章給大家分享的是有關(guān)CSS中塊級(jí)格式是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

為印江等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及印江網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、印江網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

1.BFC 定義

BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box（塊級(jí)元素）參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干.

通俗地來說：創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子，里面的子元素不會(huì)在布局上
影響外面的元素（里面怎么布局都不會(huì)影響外部），BFC任然屬于文檔中的普通流

2.BFC的生成：

知道了BFC怎么觸發(fā)BFC
滿足以下條件之一都可以觸發(fā)BFC，變身為BFC

根元素

float屬性不為none

position不為static和relative

overflow不為visible

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

你會(huì)發(fā)現(xiàn)BFC無處不在，只是自己用的時(shí)候不知道而已

3.BFC布局規(guī)則：

變身為BFC后有什么特性呢，以下：

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

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

BFC的區(qū)域不會(huì)與float box重疊。

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

4.BFC作用：

用起來come boby

1.防止外邊距重疊

bfc導(dǎo)致的屬于同一個(gè)bfc中的子元素的margin重疊(Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊)

問題：由圖可以看到，String1和String2 之間只有20px的margin，按理來說應(yīng)該是40px，但這是在bfc中導(dǎo)致了他們的margin重疊

代碼：

        String1