BFC原理和理解

時間 2019-11-10

標籤 bfc 原理理解简体版

原文原文鏈接

一.BFC是什麼？css

　　須要先介紹Box，Formatting Context的概念。css3

　　Box：css佈局的基本單位ide

　　box是css佈局的對象和基本單位，直觀點來講，就是一個頁面由不少box組成的，元素的類型和display屬性，決定了這個box的類型，不一樣類型的box會參與不一樣的Formatting Context （一個決定如何渲染文檔的容器），所以box內的元素會以不一樣的方式渲染。佈局

　　盒子：flex

　　block-level box:display屬性爲block，list-item，table的元素，會生成block-level box。而且參與block fomatting context;spa

　　inline-level box:display 屬性爲inline，inline-block，inline-table的元素，會生成inline-level box。而且參與inline formatting context；code

　　run-in box:css3中才有，不講orm

　　Formatting context對象

　　是頁面中的一起渲染區域，決定了元素之間的關係和相互做用，最多見的有兩種，Block formtting context BFC和Inline formatting context IFC.blog

　　BFC定義

　　塊兒級格式上下文。規定了內部的元素如何佈局，而且與這個區域外部豪不相干。

　　BFC佈局規則：

　　　　內部的box會在垂直方向上一個借一個的放置。

　　　　box垂直方向的距離由margin決定，屬於同一個bfc的兩個相鄰的box的margin會發生重疊。

　　　　每一個margin box的左邊，與包含塊兒border box的左邊相接觸（對於從左向右的格式化），即便存在浮動也是如此。

　　　　BFC的區域不會與float box重疊。

　　　　BFC就是頁面上一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，繁殖也如此。

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

　　二.哪些元素會產生BFC？

　　根元素

　　float屬性部位none

　　position爲absolute或fixed

　　display爲inline-block，table-cell，table-caption，flex，inline-flex

　　overflow不爲visible

　　1.自適應兩欄佈局

 1 <style>
 2     body {
 3         width: 300px;
 4         position: relative;
 5     }
 6  
 7     .aside {
 8         width: 100px;
 9         height: 150px;
10         float: left;
11         background: #f66;
12     }
13  
14     .main {
15         height: 200px;
16         background: #fcc;
17     }
18 </style>
19 <body>
20     <div class="aside"></div>
21     <div class="main"></div>
22 </body>

下面的main加上overflow hidden就能夠實習那自適應兩欄佈局

　　2.清除內部浮動

 1 <style>
 2     .par {
 3         border: 5px solid #fcc;
 4         width: 300px;
 5     }
 6  
 7     .child {
 8         border: 5px solid #f66;
 9         width:100px;
10         height: 100px;
11         float: left;
12     }
13 </style>
14 <body>
15     <div class="par">
16         <div class="child"></div>
17         <div class="child"></div>
18     </div>
19 </body>

計算BFC的高度時，浮動元素也參與計算。爲了達到清除內部浮動，咱們能夠建立父元素的BFC。那麼內部元素的浮動child元素也參與計算。

　　3.放置垂直margin重疊

 1 <style>
 2     p {
 3         color: #f55;
 4         background: #fcc;
 5         width: 200px;
 6         line-height: 100px;
 7         text-align:center;
 8         margin: 100px;
 9     }
10 </style>
11 <body>
12     <p>Haha</p>
13     <p>Hehe</p>
14 </body>

box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊。能夠在外面抱一個容器，生成一個BFC，就不會產生margin重疊了。

　　三.總結

　　BFC就是頁面上一個隔離的獨立容器，容器裏面的子元素不會影響外面的元素，繁殖也如此。因此當BFC外部存在浮動時，他不該該影響BFC內部的box的佈局，BFC會經過變窄，而不予浮動有重疊，一樣，當BFC內部右浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度，比mainmargin重疊也是這樣的一個道理。

　　感謝夢想天空的博客！

相關標籤/搜索

每日一句

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