代码改变世界

BFC原理和理解

2016-10-12 16:49  sunhengkai941022  阅读(286)  评论(0)    收藏  举报

一.BFC是什么？

　　需要先介绍Box，Formatting Context的概念。

　　Box：css布局的基本单位

　　box是css布局的对象和基本单位，直观点来说，就是一个页面由很多box组成的，元素的类型和display属性，决定了这个box的类型，不同类型的box会参与不同的Formatting Context （一个决定如何渲染文档的容器），因此box内的元素会以不同的方式渲染。

　　盒子：

　　block-level box:display属性为block，list-item，table的元素，会生成block-level box。并且参与block fomatting context;

　　inline-level box:display 属性为inline，inline-block，inline-table的元素，会生成inline-level box。并且参与inline formatting context；

　　run-in box:css3中才有，不讲

　　Formatting context

　　是页面中的一块儿渲染区域，决定了元素之间的关系和相互作用，最常见的有两种，Block formtting context BFC和Inline formatting context IFC.

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

　　感谢梦想天空的博客！