對BFC規范的理解

pingan8787 發布于2019-08-30 15:56 / 2045人閱讀

摘要：垂直方向的距離由決定。屬于同一個的兩個相鄰的會發生疊加，與方向無關。計算的高度時，浮動子元素也參與計算。形成后出現的常見問題重疊問題浮動相關問題可以解決的問題疊加的問題，要阻止重疊，只要將倆個元素別放在一個中即可。

1. 什么是BFC

BFC（block formatting context）：塊級格式化上下文。
簡單來說它就是一種會影響元素與元素之間的位置、間距的屬性。

2. 如何觸發（創建）BFC

float：給元素添加浮動
left right（除了none 以外）

overflow ：給元素添加overflow屬性
hidden，auto，scroll（除了visible 以外）

display：給元素添加display屬性
table-cell，table-caption，inline-block, flex, inline-flex

position：給元素添加定位
absolute，fixed

3. BFC特性

內部的Box會在垂直方向，從頂部開始一個接一個地放置。

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

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

BFC的區域不會與float的元素區域疊加。

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

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

4. BFC形成后出現的常見問題

margin重疊問題

浮動相關問題

5. BFC可以解決的問題

margin疊加的問題，要阻止margin重疊，只要將倆個元素別放在一個BFC中即可。

對于左右布局的元素，我們可以給右側的元素添加overflow:hidden;或者auto，左側的是float:left;

可以清除浮動，計算BFC高度，浮動元素不會撐開父元素的高度，我們可以讓父元素觸發BFC,即：使用overflow:hidden;

GPU云服務器云服務器對python的理解談談對php的理解對人工智能的理解對云服務器的理解

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

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

理解 BFC (Block Formatting Model)

摘要：是指塊級元素，就是會強制換行的元素，比如。將元素推向左側。請根據不同的實際情況，選擇最合適的方式。再次重申一下，是為子元素創建定位環境。，由于浮動元素占據了一定的寬度，新創建的會因此而變窄。這里只是為了更好地去理解而做一個例子。什么是 BFC W3C 為瀏覽器規定了三種定位模型：Normal Flow, 浮動, 和絕對定位。本文所介紹的 BFC (Block Formatting M...

Tonny 2019-08-28 18:18 評論0 收藏0
一篇文章帶拿下盒模型BFC渲染機制

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。一個的范圍包含創建該上下文元素的所有子元素，但不包括創建了新的子元素的內部元素。走在前端的大道上本篇將自己讀過的相關盒模型BFC 文章中，對自己有啟發的章節片段總結在這（會對原文進行刪改）,會不斷豐富提煉總結更新。一.常見定位方案在講 BFC 之前，我們先來了解一下常見的...

DangoSky 2019-08-30 15:55 評論0 收藏0
關于CSS中設置overflow屬性的值為hidden的相關理解

摘要：非根元素，且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內容區域創建的。如何觸發只需要保證滿足下面至少一條就會觸發根元素設置了值不為的元素設置了屬性不為的元素設置了屬性不為和的元素設置了的值為和中的任何一個的元素。作者：心葉時間：2018-04-18 17:53 包裹元素剪裁條件是不是包裹元素overflow設置為hidden以后，內部元素如果超過包裹元素的話就會被剪...

codercao 2019-08-29 15:06 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

shixinzhang 2019-08-29 16:34 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

vspiders 2019-08-02 11:24 評論0 收藏0