網游之名動江湖

1.新BFC協議的布局規則。觸發BFC 3的元素。國際金融公司BFC布局規則的作用和原則

BlockFormattingContexts(BFC)是一個塊級元素的渲染和顯示規則(BFC可以理解為一個封閉的盒子，容器中的子元素不會影響外部元素)。1.BFC的布局規則

①內部箱子將沿垂直方向一個接一個放置。

②方框的垂直距離由邊距決定，屬于同一個BFC的相鄰兩個方框的上下邊距會重疊。

③每個元素的左側與包含框的左側接觸，即使有浮動。

④④的面積。BFC不會與浮動重疊。

⑤.BFC在頁面上是一個孤立獨立的容器，容器中的子元素不會影響外部元素。反之亦然。

⑥計算BFC高度時，浮動要素也參與計算。

只要元素滿足以下任一條件，就可以觸發BFC功能。

1.根元素。

②的屬性。float不是無。

③.位置是絕對的或固定的。

④.顯示為內嵌塊；；表格單元格；表格標題；靈活多變.

⑤.溢出是不可見的。

①解決頁邊距重疊的問題。

②解決浮高坍塌問題。

③解決侵占浮動元素的問題。

先看自適應兩欄布局。

讓我們先定義兩個div:

4.然后定義css:

效果圖如下:

這是為了滿足第三個規范:

每個元素的左邊與包含的框的左邊接觸。即使有波動。

假設我們需要保持紅色左邊的黑色區域。有必要使用規范的第四條:

BFC的區域不會與浮動重疊。

換句話說，我們需要建立BFC地區。我們通過將紅色區域的溢出設置為隱藏來觸發BFC:

效果如下:

5.接下來，我們來看看清除內部浮動。

首先是父div避孕套div。

6.然后css:

效果如下:

可以看到，父div根本沒有打開。

讓我們回憶一下BFC規范中的第六條:

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

所以我們需要將父div觸發到BFC，也就是將其溢出設置為hidden:

效果如下:

您可以看到父div已經打開。

7.先說保證金的重疊。

首先定義兩個垂直div:

然后定義利潤:

您可以看到頁邊距重疊的效果:

讓我們看看BFC規范中的第二條:

框的垂直距離由邊距決定，屬于一個BFC的兩個相鄰框的上下邊距會重疊。

說明兩者都屬于同一個BFC，因此我們需要兩個不屬于同一個BFC的div。

為第二個div設置一個父div。然后，如果溢出設置為隱藏以激活BFC，邊距將不再重疊。

效果如下:

-

IFC(InlineFormattingContexts)

從字面上翻譯為“內聯格式上下文”，IFC的行框高度是從其包含的行中元素的最高實際高度計算的(不受垂直方向上的填充/邊距的影響)。

水平居中:當一個塊要在環境中水平居中時，將其設置為inline-block將在外層生成IFC，text-align可以使其水平居中。

垂直居中:創建IFC，使用其中一個元素擴展父元素的高度，然后設置其vertical-align:middle，以便該行中的其他元素可以在該父元素下垂直居中。國際金融中心布局規則

1.1.ifc中的元素將從左到右排成一行。

2.一條線上的所有元素將在該區域形成一個線盒。

3.線寬的高度是包含框的高度，高度是行框中最高元素的高度。

4.浮動元素不會在線框中，浮動元素會壓縮線框的寬度。

5.當行框寬度容納不下子元素時，子元素將顯示在下一行，并生成新的行框。

6.在行框的元素中遵循文本對齊和垂直對齊。

文章如有錯誤，請在評論區改正。如果這篇文章對你有幫助，請喜歡并關注它。我希望你會非常喜歡它。...