資訊專欄INFORMATION COLUMN
摘要：垂直方向的距離由決定。屬于同一個(gè)的兩個(gè)相鄰的會(huì)發(fā)生疊加，與方向無關(guān)。計(jì)算的高度時(shí)，浮動(dòng)子元素也參與計(jì)算。形成后出現(xiàn)的常見問題重疊問題浮動(dòng)相關(guān)問題可以解決的問題疊加的問題，要阻止重疊，只要將倆個(gè)元素別放在一個(gè)中即可。
1. 什么是BFC
BFC（block formatting context）：塊級格式化上下文。
簡單來說它就是一種會(huì)影響元素與元素之間的位置、間距的屬性。
float：給元素添加浮動(dòng)
left right（除了none 以外 ）
overflow ：給元素添加overflow屬性
hidden，auto，scroll（除了visible 以外）
display：給元素添加display屬性
table-cell，table-caption，inline-block, flex, inline-flex
position：給元素添加定位
absolute，fixed
內(nèi)部的Box會(huì)在垂直方向，從頂部開始一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加，與方向無關(guān)。
每個(gè)元素的margin-left， 與包含塊(border-left)的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float的元素區(qū)域疊加。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然。
計(jì)算BFC的高度時(shí)，浮動(dòng)子元素也參與計(jì)算。
4. BFC形成后出現(xiàn)的常見問題margin重疊問題
浮動(dòng)相關(guān)問題
5. BFC可以解決的問題margin疊加的問題，要阻止margin重疊，只要將倆個(gè)元素別放在一個(gè)BFC中即可。
對于左右布局的元素，我們可以給右側(cè)的元素添加overflow:hidden;或者auto，左側(cè)的是float:left;
可以清除浮動(dòng)，計(jì)算BFC高度，浮動(dòng)元素不會(huì)撐開父元素的高度，我們可以讓父元素觸發(fā)BFC,即：使用overflow:hidden;
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117540.html
摘要：是指塊級元素，就是會(huì)強(qiáng)制換行的元素，比如。將元素推向左側(cè)。請根據(jù)不同的實(shí)際情況，選擇最合適的方式。再次重申一下，是為子元素創(chuàng)建定位環(huán)境。，由于浮動(dòng)元素占據(jù)了一定的寬度，新創(chuàng)建的會(huì)因此而變窄。這里只是為了更好地去理解而做一個(gè)例子。 什么是 BFC W3C 為瀏覽器規(guī)定了三種定位模型：Normal Flow, 浮動(dòng), 和絕對定位。本文所介紹的 BFC (Block Formatting M...
摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。一個(gè)的范圍包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新的子元素的內(nèi)部元素。 走在前端的大道上 本篇將自己讀過的相關(guān) 盒模型BFC 文章中，對自己有啟發(fā)的章節(jié)片段總結(jié)在這（會(huì)對原文進(jìn)行刪改）,會(huì)不斷豐富提煉總結(jié)更新。 一.常見定位方案 在講 BFC 之前，我們先來了解一下常見的...
摘要：非根元素，且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內(nèi)容區(qū)域創(chuàng)建的。如何觸發(fā)只需要保證滿足下面至少一條就會(huì)觸發(fā)根元素設(shè)置了值不為的元素設(shè)置了屬性不為的元素設(shè)置了屬性不為和的元素設(shè)置了的值為和中的任何一個(gè)的元素。 作者：心葉時(shí)間：2018-04-18 17:53 包裹元素剪裁條件 是不是包裹元素overflow設(shè)置為hidden以后，內(nèi)部元素如果超過包裹元素的話就會(huì)被剪...
摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。而，塊級格式化上下文，就是一個(gè)塊級元素的渲染顯示規(guī)則。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個(gè)概念...
摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。而，塊級格式化上下文，就是一個(gè)塊級元素的渲染顯示規(guī)則。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個(gè)概念...
閱讀 782·2023-04-25 22:50
閱讀 1621·2021-10-08 10:05
閱讀 1058·2021-09-30 09:47
閱讀 2012·2021-09-28 09:35
閱讀 893·2021-09-26 09:55
閱讀 3486·2021-09-10 10:51
閱讀 3489·2021-09-02 15:15
閱讀 3356·2021-08-05 09:57
