BFC：塊級格式上下文詳解

wyk1184 發布于2019-08-02 16:17 / 1341人閱讀

摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。

1.BFC簡要定義

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。

2.BFC創建方式

根元素或其它包含它的元素；

浮動 (元素的float不為none)；

絕對定位元素 (元素的position為absolute或fixed)；

行內塊inline-blocks(元素的 display: inline-block)；

表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；

overflow的值不為visible的元素；

彈性盒 flex boxes (元素的display: flex或inline-flex)

3.BFC內部特性

內部的盒會在垂直方向一個接一個排列（可以看作BFC中有一個的常規流）；

處于同一個BFC中的元素相互影響，可能會發生margin collapse；但不同BFC可以阻止margin collapse

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

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然；

計算BFC的高度時，考慮BFC所包含的所有元素，連浮動元素也參與計算；

浮動盒區域不疊加到BFC上；

4.BFC應用實例 1.BFC清除浮動

將父元素設置一個能讓其變為BFC區域的屬性，不如overflow：auto




    
    Title
    



    one
    two

2.BFC處理margin collapse

在CSS中，兩個或多個毗鄰的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外邊距會發生疊加，這種形成的外邊距稱之為外邊距疊加。這里講解父子元素，兄弟元素同理。




    
    Title
    



    aaaaaaaaaaaaaa
    bbbbbbbbbbbbbb

BFC改造后

云服務器 GPU云服務器格式詳解電腦上下載的視頻怎么轉換格式 bfc bfc布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/55018.html

BFC：塊級格式上下文詳解

摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。 1.BFC簡要定義 BFC(Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。 2.B...

HelKyle 2019-08-30 10:50 評論0 收藏0
BFC：塊級格式上下文詳解

摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。 1.BFC簡要定義 BFC(Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區域，它規定了內部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區域，并且與這個區域外部毫不相干。 2.B...

Shihira 2019-08-26 18:26 評論0 收藏0
BFC原理詳解

摘要：最常見的有簡稱和簡稱。可以把它理解成是一個獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據布局規則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應布局布局一.BFC是什么在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 評論0 收藏0
想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC

摘要：并且這種過程遵循標準的描述只要不是和絕對定位方式布局的，都在普通流里面。定位相對定位在普通流之中，是相對于它在普通流中的位置中進行移動，元素占據原來位置絕對定位脫離普通流，不占據空間相對于距離它最近的那個已定位的祖先相對絕對元素決定的。視覺格式化模型頁面(文檔樹)可以想象成是由一個個的Box組合而成的，而視覺格式化模型(Visual formatting model)是一套規則，將...

Edison 2019-08-30 13:00 評論0 收藏0