對BFC的一點認識

時間 2019-11-17

標籤 bfc 一點 1點認識简体版

原文原文鏈接

首先讓我複習一下塊級元素（block）和內聯元素（inline）

塊元素(block)的特色：html

block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
block元素能夠設置margin和padding屬性。

內聯元素(inline)的特色： ide

inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
inline元素設置width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

BFC是什麼？

那麼什麼是bfc呢，翻譯一下叫Block Formatting Context，Block就是塊級元素，Formatting Context是一個抽象的概念，它指的是頁面中一個渲染區域，並擁有一套渲染規則，它決定了在區域中的子元素如何定位和其餘元素的相互關係和做用，那麼顯然BFC的意思就是一個針對block元素的規則區域（越接觸代碼越以爲本身是在創造世界，那麼BFC就是一個爲block元素創造的世界，這個世界有一套規則在規定它的行爲）佈局

BFC中的渲染規則？

block元素在垂直方向上一個個排列，每一個元素的左外邊距與包含塊的左邊界相接觸；（原來塊級元素的特色是BFC賦予它的）
block元素垂直方向上的margin會重疊。（完整的說法是：屬於同一個BFC的倆個相鄰的塊級元素的margin會發生重疊，與方向無關，可是由於block元素獨佔一行，它們的左右margin沒有機會重疊。）
BFC區域不會與浮動元素重疊，計算BFC區域高度的時候會把浮動元素的高度計算在內（這是over-flow：hidden清除浮動的原理）
BFC做爲一個獨立的渲染區域，容器裏面的元素不會影響外面，外面的元素也不會影響裏面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    html * {
        margin: 0;
        padding: 0;
    }

    body{
        margin: 20px;
        border:1px solid
    }

    div {
        margin: 20px 0;
        height: 20px;
        background: red;
    }
</style>

<body>
    <div>我是block元素</div>
    <div>我是block元素</div>
    <div>我是block元素</div>
    <div>我是block元素</div>
</body>

</html>

View Code

讓咱們舉個栗子，一開始我沒法理解我什麼都沒作，怎麼頁面就呈現了BFC規則下的狀態，原來咱們的根元素html就是一個BFC區域，而body元素則做爲包含塊存在，如上就能夠很清晰的看到div在垂直方向上一個個排列，而且左邊界與包含塊body的左邊界相接觸，它們之間的margin重疊，只有20px；ui

如今來驗證一下html是否是一個BFC區域和規則的第三條，咱們將div設爲float：left；spa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    html * {
        margin: 0;
        padding: 0;
    }

    div {
        float: left;
        height: 20px;
        background: red;  
    }
</style>

<body>
    <div>我是float元素</div>
</body>

</html>

View Code

能夠看出html的高度和浮動元素div的高度一致都是20px；而包含塊body做爲一個html-BFC中的普通block元素，高度爲0；翻譯

那麼除了html根元素，咱們能夠手動設置某一個元素爲BFC麼，答案是確定的code

建立BFC

float的值不爲none
overflow的值不爲visible
display的值爲inline-block、table-cell、table-caption（display：table也認爲能夠生成BFC，其實這裏的主要緣由在於Table會默認生成一個匿名的table-cell，正是這個匿名的table-ccell生成了BFC）
position的值爲absolute或fixed
fieldset元素

好，那我就順便再來複習一下這些屬性orm

float的值有left，right，none；因此一個元素只要浮動起來了，那就會建立BFC區域；這裏要注意的是position:absolute和float會隱式的改變display類型，變爲display:inline-block，能夠設置長寬，默認寬度並不佔滿父元素，就算是顯示的設置display:inline或display:block，也沒有效果（由於下文display：inline-block也能夠建立BFC，難道是由於float改變元素display後致使建立的BFC，此爲推測）。
overflow的值有visible、hidden、scroll、auto；這個屬性主要規定內容溢出元素框時發生的事情；這裏注意的是咱們每每設置overflow：hidden來清除浮動，由於其餘scroll和auto雖然也會建立BFC區域，可是會出現滾動條
display的值inline-block內聯塊狀元素、table-cell表格單元格，相似<td><th>、table-caption表格標題,相似<caption>
position的值有absolute、relative、fixed、static；absolute絕對定位，相對於第一個定位的父元素定位；relative相對定位，相對與自身定位；並不脫離文檔流；fixed相對於視口定位
fieldset元素，用的比較少，通常用來給表單畫框

BFC的做用

網上舉例的BFC做用好比清除浮動、消除margin重疊、佈局等等我就很少贅述了，可是我總感受這只是利用BFC的特性作一些小事，殺雞用牛刀，事實上BFC並無具體的做用，它是一套渲染的規則，而理解這些規則能夠幫助咱們更好的使用CSS，對CSS有一種宏觀的掌控，而解決具體的問題就交給具體的屬性去作吧！　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　htm

參考文章

http://www.cnblogs.com/dojo-lzz/p/3999013.html#undefinedblog

https://www.jianshu.com/p/76484dff1cb5

http://www.360doc.com/content/16/0229/16/19812575_538294774.shtml

http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120133584314892/

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　「即使是兇殘的野獸和恍惚的小鳥也不會落入相同的陷阱或羅網兩次。」　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——聖哲羅姆（古羅馬學者）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。