資訊專欄INFORMATION COLUMN
摘要：它是頁面中的一塊渲染區(qū)域，并且有一套自己的渲染規(guī)則，規(guī)定了內(nèi)部子元素如何定位，以及與其他元素的關(guān)系和相互作用。即使浮動也是如此。解決方案，根據(jù)規(guī)則第六條。防止垂直疊加內(nèi)部相鄰的元素的會疊加。根據(jù)規(guī)則第五條，將其中一個設(shè)置為即可。
1、CSS 最基本的布局單位
Box 是 CSS 布局的對象和基本單位。
元素的類型和display的屬性決定了Box的類型。
BFC（Box Formatting Context）是一個獨(dú)立的渲染區(qū)域，規(guī)定內(nèi)部的元素如何布局，并且與外部的元素?zé)o關(guān)。
Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套自己的渲染規(guī)則，規(guī)定了內(nèi)部子元素如何定位，以及與其他元素的關(guān)系和相互作用。
內(nèi)部的Box會在垂直方向上一個接著一個放置。
Box垂直方向的距離由 margin 決定。屬于同一個BFC中的兩個相鄰的Box上下margin會發(fā)生疊加。
每個元素的margin box 的左邊，與包含塊border box 的左邊相接觸。即使浮動也是如此。
BFC 的區(qū)域不會與float box 重疊。
BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響外面的元素，反之也如此。
計(jì)算BFC的高度時，浮動元素也參與計(jì)算。
根元素；
float 屬性不為 none；
position 為 absolute 或 fixed；
display 為 inline-block，table-cell，table-caption，flex，inline-flex；
overflow 不為 visible；
5、BFC的作用及原理 自適應(yīng)兩欄布局：左邊定寬高，右邊自適應(yīng)。
左側(cè)浮動，然后左右重疊，根據(jù)BFC的規(guī)則第三、四條，設(shè)置右側(cè)的元素為BFC。
清除內(nèi)部浮動：
一個元素里面，有兩個浮動的元素，父元素的高度默認(rèn)是不計(jì)算浮動元素的高度。
解決方案，根據(jù)BFC規(guī)則第六條。
防止垂直margin疊加：
BFC內(nèi)部相鄰的元素的margin會疊加。
根據(jù)BFC規(guī)則第五條，將其中一個設(shè)置為BFC即可。
BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117214.html
摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。產(chǎn)生折疊的必備條件必須是鄰接的而根據(jù)規(guī)范，兩個是鄰接的必須滿足以下條件必須是處于常規(guī)文檔流非和絕對定位的塊級盒子并且處于同一個當(dāng)中。 1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響? 何謂浮動元素？有什么特征？所謂浮動元素，即是設(shè)置了浮動屬性的元素。其特征為： 1.浮動的框可以向左或者向右移動，直到它的外...
摘要：合并的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...
摘要：合并的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...
摘要：是指塊級元素，就是會強(qiáng)制換行的元素，比如。將元素推向左側(cè)。請根據(jù)不同的實(shí)際情況，選擇最合適的方式。再次重申一下，是為子元素創(chuàng)建定位環(huán)境。，由于浮動元素占據(jù)了一定的寬度，新創(chuàng)建的會因此而變窄。這里只是為了更好地去理解而做一個例子。 什么是 BFC W3C 為瀏覽器規(guī)定了三種定位模型：Normal Flow, 浮動, 和絕對定位。本文所介紹的 BFC (Block Formatting M...
閱讀 2819·2021-11-04 16:15
閱讀 3507·2021-09-29 09:35
閱讀 4104·2021-09-22 15:45
閱讀 1447·2019-08-30 15:55
閱讀 1725·2019-08-30 15:44
閱讀 2774·2019-08-29 12:56
閱讀 2731·2019-08-26 13:30
閱讀 2201·2019-08-23 17:00
