資訊專(zhuān)欄INFORMATION COLUMN
摘要：下面就來(lái)介紹和的布局規(guī)則。布局規(guī)則原文整理為中文內(nèi)部的會(huì)在垂直方向，一個(gè)接一個(gè)地放置。解決方案為加上使其形成，根據(jù)規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算的元素的高度，達(dá)到清除浮動(dòng)影響的效果。并為這個(gè)外層元素設(shè)置，使其形成。
想要理解BFC與IFC，首先要理解另外兩個(gè)概念：Box 和 FC（即 formatting context）。
Box一個(gè)頁(yè)面是由很多個(gè) Box 組成的，元素的類(lèi)型和 display 屬性決定了這個(gè) Box 的類(lèi)型。不同類(lèi)型的 Box，會(huì)參與不同的 Formatting Context。
Block level的box會(huì)參與形成BFC，比如display值為block，list-item，table的元素。
Inline level的box會(huì)參與形成IFC，比如display值為inline，inline-table，inline-block的元素。
參考：W3C文檔block-level
FC（Formatting Context）它是W3C CSS2.1規(guī)范中的一個(gè)概念，定義的是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。
常見(jiàn)的Formatting Context 有：Block Formatting Context（BFC | 塊級(jí)格式化上下文） 和 Inline Formatting Context（IFC |行內(nèi)格式化上下文）。
下面就來(lái)介紹IFC和BFC的布局規(guī)則。
IFC布局規(guī)則：BFC布局規(guī)則：在行內(nèi)格式化上下文中，框(boxes)一個(gè)接一個(gè)地水平排列，起點(diǎn)是包含塊的頂部。水平方向上的 margin，border 和 padding在框之間得到保留。框在垂直方向上可以以不同的方式對(duì)齊：它們的頂部或底部對(duì)齊，或根據(jù)其中文字的基線對(duì)齊。包含那些框的長(zhǎng)方形區(qū)域，會(huì)形成一行，叫做行框。
W3C原文：
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the "margin" properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box"s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box"s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
整理為中文：
內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的左外邊緣（margin-left)， 與包含塊的左邊（contain box left）相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。除非這個(gè)元素自己形成了一個(gè)新的BFC。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
參考：
W3C文檔inline-formatting
W3C文檔block-formatting
塊級(jí)格式化上下文由以下之一創(chuàng)建：
根元素或其它包含它的元素
浮動(dòng) (元素的 float 不是 none)
絕對(duì)定位的元素 (元素具有 position 為 absolute 或 fixed)
非塊級(jí)元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
塊級(jí)元素具有overflow ，且值不是 visible
整理到這兒，對(duì)于上面第4條產(chǎn)生了一個(gè)small small的疑問(wèn)：為什么display: inline-block;的元素是inline level 的元素，參與形成IFC，卻能創(chuàng)建BFC？
后來(lái)覺(jué)得答案是這樣的：inline-block的元素的內(nèi)部是一個(gè)BFC，但是它本身可以和其它inline元素一起形成IFC。
BFC用處 1. 清除浮動(dòng)1 2
.wrap {
border: 2px solid yellow;
width: 250px;
}
section {
background-color: pink;
float: left;
width: 100px;
height: 100px;
}
可以看到，由于子元素都是浮動(dòng)的，受浮動(dòng)影響，邊框?yàn)辄S色的父元素的高度塌陷了。
解決方案：為 .wrap 加上 overflow: hidden;使其形成BFC，根據(jù)BFC規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算float的元素的高度，達(dá)到清除浮動(dòng)影響的效果。
2. 布局：自適應(yīng)兩欄布局我是好多好多文字會(huì)換行的那種蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤
div {width: 200px;}
aside {
background-color: yellow;
float: left;
width: 100px;
height: 50px;
}
main {
background-color: pink;
}
可以看到右側(cè)元素的一部分跑到了左側(cè)元素下方。
解決方案：為main設(shè)置 overflow: hidden; 觸發(fā)main元素的BFC，根據(jù)規(guī)則第4、5條，BFC的區(qū)域是獨(dú)立的，不會(huì)與頁(yè)面其他元素相互影響，且不會(huì)與float元素重疊，因此就可以形成兩列自適應(yīng)布局
3. 防止垂直margin合并1 2
section {
background-color: pink;
margin-bottom: 100px;
width: 100px;
height: 100px;
}
.bottom {
margin-top: 100px;
}
可以看到，明明.top和.bottom中間加起來(lái)有200px的margin值，但是我們只能看到100px。這是因?yàn)樗麄兊耐膺吘嘞嘤霭l(fā)生了合并。
怎樣解決：為其中一個(gè)元素的外面包裹一層元素。并為這個(gè)外層元素設(shè)置 overflow: hidden;，使其形成BFC。因?yàn)锽FC內(nèi)部是一個(gè)獨(dú)立的容器，所以不會(huì)與外部相互影響，可以防止margin合并。
1 2
.wrap {
overflow: hidden;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112045.html
摘要：的一些名詞和概念用來(lái)幫你更明確地去描述世界的事物。具體信息可以參考盒模型的解釋?zhuān)@里暫且不作展開(kāi)。的位置和大小時(shí)根據(jù)一個(gè)稱(chēng)為的邊界進(jìn)行計(jì)算的。其它情況，依據(jù)設(shè)定的值進(jìn)行處理指定值最終表現(xiàn)值與指定值相同 CSS的一些名詞和概念 用來(lái)幫你更明確地去描述HTML/CSS世界的事物。 box 在CSS中，一個(gè)元素就可以看作一個(gè)box。具體信息可以參考盒模型的解釋?zhuān)@里暫且不作展開(kāi)。 conta...
摘要：作者陳大魚(yú)頭正常流什么是正常流其實(shí)就是我們?nèi)粘Ｋf(shuō)的文檔流。在官方文檔里對(duì)應(yīng)的是。然后，包含形成一條線的框的矩形區(qū)域稱(chēng)為線盒?；€線盒的高度由的計(jì)算結(jié)果決定。級(jí)層疊上下文被自動(dòng)視為父級(jí)層疊上下文的一個(gè)獨(dú)立單元。自由分配，由具體情況決定。 作者：陳大魚(yú)頭 github： KRISACHAN 正常流 什么是正常流？其實(shí)就是我們?nèi)粘Ｋf(shuō)的文檔流。在W3C官方文檔里對(duì)應(yīng)的是normal ...
摘要：作者陳大魚(yú)頭正常流什么是正常流其實(shí)就是我們?nèi)粘Ｋf(shuō)的文檔流。在官方文檔里對(duì)應(yīng)的是。然后，包含形成一條線的框的矩形區(qū)域稱(chēng)為線盒?；€線盒的高度由的計(jì)算結(jié)果決定。級(jí)層疊上下文被自動(dòng)視為父級(jí)層疊上下文的一個(gè)獨(dú)立單元。自由分配，由具體情況決定。 作者：陳大魚(yú)頭 github： KRISACHAN 正常流 什么是正常流？其實(shí)就是我們?nèi)粘Ｋf(shuō)的文檔流。在W3C官方文檔里對(duì)應(yīng)的是normal ...
摘要：最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。雖然我知道如何利用 BF...
摘要：最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。雖然我知道如何利用 BF...
閱讀 3806·2021-11-12 10:36
閱讀 3891·2021-09-22 15:48
閱讀 3596·2019-08-30 15:54
閱讀 2668·2019-08-29 16:44
閱讀 2417·2019-08-29 16:08
閱讀 2489·2019-08-29 16:06
閱讀 1354·2019-08-29 15:21
閱讀 3290·2019-08-29 12:39
