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重叠也是这样的一个道理。

　　感谢梦想天空的博客！