“流”，文档流，是CSS中最基本的定位和布局机制。
浏览器中的元素默认的从左到右（内联元素），从上到下（块级元素）如同流水一般堆砌的布局方式。
一、float属性
float属性的特性如下:
- 被设置了float属性的元素呈现包裹性，即其自身的width不是默认撑满父元素，而是和height属性一样由子元素决定。
- 被设置了float的元素会块状化并格式化上下文，简单来说就是display的值变为block，并生成了一个BFC
- 因为生成了BFC，所有设置了float的元素垂直方向不会产生margin合并
- 脱离文档流，外在表现为高度塌陷，后面元素和其重叠。
前三个属性都是十分优秀的特性，但是第四个属性有些时候就会产生很大的问题，因此我们在使用float的时候要考虑清除这种高度塌陷，如下图所示。
CSS部分代码：
.wreap{
border: 1px solid #000000;
}
.size{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box{
margin: 10px;
}
.box1 {
background-color: blue;
}
.clear{
clear: both;
}HTML部分代码：
<body>
<div class="wreap">
<div class="box size"></div>
<div class="box size box1"></div>
</div>
</body>浮动的清除
（1）clear：both清除浮动元素的浮动
代码在上述的基础上，就在具有box1样式的div下面增加了一个具有clear：both属性的div
<body>
<div class="wreap">
<div class="box size"></div>
<div class="box size box1"></div>
<div class="clear"></div>
</div>
</body>当然直接使用伪元素:alter能更优雅的实现清除浮动大致代码如下：
.wreap{
border: 1px solid #000000;
}
.size{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box{
margin: 10px;
}
.box1 {
background-color: blue;
}
.clear:after{
content: "";
display: block;
clear: both;
}<body>
<div class="wreap clear">
<div class="box size"></div>
<div class="box size box1"></div>
</div>
</body>可以吧clear:alter这一条写到全局样式，哪里需要清除浮动，直接在对应的位置加上clear即可。
（2）通过构建BFC清除浮动
BFC的特性一会儿会详细介绍，其中之一就是BFC会包含浮动的块，即其会被浮动的元素撑开。
所以将浮动元素的父元素变为BFC也可以解决浮动。
二、BFC
1.BFC是什么
BFC(Block Formatting Context) 格式化上下文，是web中盒模型的一种布局和css渲染模式，简单的来说，就是构成了BFC的元素就如同上了个buff结界，其会变成了一个独立和外界隔绝的容器，无论内部如何折腾，都不会影响到外界，同样外界也影响不到他。
2.如何形成BFC
- 浮动元素会形成BFC，即所有float值部位none的元素
- 定位元素，position为absolute和fixed的元素
- dispaly为inline-block，table-cell，table-caption的值（讲老实话，除了inline-block意外，另外两个比较少用）
- overflow 除了 visible 以外的值（hidden，auto，scroll），其中hidden常用于浮动的清除。
3.BFC的特性
- BFC内部的子元素会自左到右边（行内元素），自上而下（块级元素）排列，常规排列的子元素左外边距应该和包含块的左边缘接触，可以看作BFC内部有一个常规文档流。
- 因为内部可以看作有常规文档流，所以子元素块级元素见同样会发生margin在垂直方向的合并，解决方法就是让子元素也变成BFC
- BFC呈现包裹性，自身计算宽高的时候，浮动的元素也会被计算进去，正是凭借这一特性，BFC也可以用来清楚浮动所带来的高度塌陷。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，同样外面天打雷劈也影响不到里面。
