浮动
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7、浮动元素之间没有垂直margin的合并
清除浮动
父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
-
使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;}清除浮动的使用方法：
.con2{... overflow:hidden} 或者 <div class="con2 clearfix">
css中font的一种简写方式：
字体/行高
浮动的时候，浮动顺序还是按文档中的来，文档中先出现的先浮动，后出现的后浮动
因为浮动了，所以被转换成了行内块元素，自动支持宽和高
浮动的子元素，无法撑开父级的高度；父元素要给高度，给多少就高多少
这个时候需要清除浮动。清除浮动有三种方式（1）在父级加overf：hidden （2）在最后一个子元素后面加一个空的div，给style样式属性clear：both （3）最常用的方式：
既可以消除塌陷，也可以清楚浮动
代码奉上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.con,.con2{
width: 300px;
/*height: 300px;*/
border: 1px solid #000;
margin: 100px auto 0;
font-size: 0
}
.con a{
width: 50px;
height: 50px;
display: inline-block;
background-color: gold;
font-size: 16px;
margin: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
.con2 a{
width: 50px;
height: 50px;
display: inline-block;
background-color: gold;
font-size: 16px;
margin: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
float: left;
}
.con2{
/*height: 300px;*/
/*overflow: hidden;*/
}
/*.clearfix:after{
content: "";
display: table;
clear: both;
}*/
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="con">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
</div>
<div class="con2 clearfix">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<!-- <div style="clear: both"></div> -->
</div>
</body>
</html>
效果展示：
含有before和after
- 浮动的时候没有行内块元素的间隙
浮动的时候，元素转换为行内块元素，但是和行内块元素还是有区别的（1）不会因为代码换行产生间距（2）有浮动的特性，往左靠或者往右靠
