盒子模型图
1.基础概念
块级元素(block-level element)：那种被浏览器渲染为blocks的元素。如果某个元素的display属性的值为：block，table，list-item的话，那么这个元素就是一个块级元素。在这里我们需要注意到display值为inline-block的元素，他们是块级容器元素。
块级盒子(block-level box)：块级盒子是一种参与了块级排版上下文(BFC)的盒子，每个块级元素都会生成一个块级盒子，块级盒子里面的内容有后代盒子以及generated content，并且后代盒子参与任何定位的计算。
块级盒子在渲染层面中又可以更加细致的分为：content-box，padding-box，border-box，margin-box。
块级容器元素(block container element)：如果某个元素的display属性的值为inline-block，table-cell，table-caption的话，那么它们就是块级容器元素。
元素的包含块：如果元素的position的值是static或者relative的话，那么这个元素的包含块就是距离自己最近的父辈块级盒子的content-box。对于position的值是absolute的元素，那么包含块就是距离自己最近的position的值为非static的父辈元素，而且这个父辈元素可以是任何类型，如果这个父辈元素是块级元素的话，那么包含块就是这个块级元素的padding-box；如果这个父辈元素是行内元素的话，那么包含块就是这个行内元素的content-box。对于浮动元素来说，其包含块被定义为最近的块级祖先元素。
排版上下文(Formatting context)：它是一种规则，这种规则的应用开关可以被开发人员控制。BFC：块级盒子排版上下文；IFC：行内盒子排版上下文。当然，还存在着其他排版上下文，比如说FFC。
那么问题来了，我们怎么启用BFC排版规则呢？答案就是对于浮动元素，绝对定位以及fixed定位，块级容器元素，设置了overflow属性不是visible的块级元素来说，它们会给自己后代元素的布局开启BFC规则。
在块级排版上下文中定义了下面这些内容：在一个块级排版上下文中，盒子是从包含块顶部开始垂直的一个接一个的排列的，在一个块级排版上下文中相邻的块级盒子之间的垂直margin是会发生折叠的。从文档流中删除的元素也不会参与BFC布局，比如说float元素以及position=absolute以及position=fixed元素。需要注意的地方是，:root元素会给自己的后代元素应用BFC排版规则。计算开启了BFC排版规则的盒子的高度时，子类当中的浮动元素也会被包括在内。
上面所说的是块级排版上下文中的垂直排版规则，下面说说水平排版规则。在块级排版上下文中，每个盒子的左外边是接触到包含块的左边的。
2.BFC可以用来做什么
- 1.防止margin的重叠，BFC就是页面上的一个隔离开来的独立容器，开启了BFC的元素就像是一堵墙，这样做可以防止margin的重叠。当然了，这个功能就犹如鸡肋，但还是看看演示效果：
<div class="bfc-create">
<div class="child child1"></div>
</div>
<div class="bfc-create">
<div class="child child2"></div>
</div>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.bfc-create{
overflow: auto;
}
.child{
width: 300px;
height: 300px;
margin-top: 300px;
margin-bottom: 300px;
}
.child1{
background-color: red;
}
.child2{
background-color: green;
}
</style>
效果图
但是如果不给.bfc-create元素添加任何效果的话，那么效果图将会是下面这样：
没有BFC这堵墙时的效果图
- 2.清除浮动，这里说的清除浮动指的是清除由于子元素浮动所带来的使得父元素高度塌陷的影响。下面来看看高度塌陷的效果：
高度塌陷示意图
如果我们让父元素开启BFC排版规则的话，那么将可以消除高度塌陷效果。为什么呢？这是因为计算开启BFC排版规则的元素来说，浮动子元素的高度也会参与计算。可以看看效果：
<div class="container">
<div class="float"></div>
</div>
<style type="text/css">
.container{
border: 5px solid red;
overflow: auto;//去了则会塌陷
}
.float{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
</style>
效果图
当然还有其他清除浮动的方法，比如说下面这种，但是下面这种是为什么，目前并不晓得，权当留个印象。
.cf:before,.cf:after{
content: "";
display: table;
}
//必须在:after伪元素 clear:both
.cf:after{
clear: both;
}
.cf{
zoom: 1;
}
把上面的清除浮动的样式应用到父元素上，即可避免高度塌陷的效果：
效果
网友评论