1、浮动
1、标准流（文档流）：元素按部就班按照自身的特性排列
2、浮动定义：元素会脱离标准普通流的控制，移动到指定位置的过程
3、使用：
(1) 左浮动：float：left
(2) 右浮动：float：right
4、结论
(1) 浮动后的元素会脱离标准流，漂浮在其他没有浮动的盒子上边
(2) 浮动后的两个块状元素会在同一行显示
(3) 浮动后的元素不占有原来的位置
(4) 浮动后的元素不会超出父元素的范围
(5) 浮动后的元素自动的转化为行内块元素，浮动后的元素不超过父元素的内边距
2、清除浮动
1、定义：清除浮动：并不是清除浮动，而是清除浮动所带来的影响
2、为什么要清除浮动？
① 浮动后的元素不会撑开的父元素的高度，因为浮动是不占位置的
② 与浮动元素同级的非浮动元素会跟随其后
③ 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
3、如何清除浮动？
① 额外标签法：在浮动元素的后边加上标签
1) <div style="clear: left;"></div>
2) 清除左浮动 clear: left
3) 清除右浮动 clear: right
4) 清除左右浮动 clear: both
5) 优点：通俗易懂，书写方便
6) 缺点：添加了额外的标签，结构化差
② overflow属性：在父元素中添加
1) overflow: hidden;
2) overflow: scroll;
3) overflow: auto;
4) 优点：但是代码简洁
5) 缺点： 盒子中多余的内容会被隐藏掉
③ 使用after伪元素清除浮动：给父元素添加
1) .clearfix::after { content: ‘ ‘; display: block; clear: both; }
2) 优点：符合闭合浮动思想 结构语义化正确
3) 缺点：IE6-7不支持:after
④ 双伪元素清除浮动:给父元素添加after以及before伪元素
1) .clearfix::after, .clearfix::before { content: ‘‘;display: table;clear: both; }
2) 优点：代码简洁
3) 缺点：IE6-7不支持:after