?css中的float属性，用于控制元素的浮动方向 float有none，left，right，inherit四个取值
?先来看看以下布局：
A
B
C
* {
margin: 0;
padding: 0;
}
.container {
margin: 50px;
width: 200px;
height: 150px;
background: yellow;
border: 2px solid red;
}
.block1 {
width: 50px;
height: 50px;
background: orange;
text-align: left;
}
.block2 {
width: 50px;
height: 50px;
background: greenyellow;
text-align: center;
}
.block3 {
width: 50px;
height: 50px;
background: deepskyblue;
text-align: right;
}
显示效果如下： 
?给A设置浮动属性，让A浮动到父容器右侧
.block1 {
width: 50px;
height: 50px;
background: orange;
text-align: left;
float: right;
}
可以看出，浮动后的元素，不再占据父容器的空间
?修改float属性，让元素向左浮动，并将A宽度调小一点，方便观察效果
.block1 {
width: 40px;
height: 50px;
background: orange;
text-align: left;
float: left;
}
可以看到，A浮动后，B移动到了A留下的空间，但是B里面包含的文字并没有移过去，而是显示在A的下面 浮动元素不会影响块级元素布局，但是会影响内联元素布局，最常见的就是影响文本位置
?改变ABC的大小，让它们全部向左浮动，观察运行效果
* {
margin: 0;
padding: 0;
}
.container {
margin: 50px;
width: 200px;
height: 150px;
background: yellow;
border: 2px solid red;
}
.block1 {
width: 50px;
height: 80px;
background: orange;
text-align: left;
float: left;
}
.block2 {
width: 150px;
height: 50px;
background: greenyellow;
text-align: center;
float: left;
}
.block3 {
width: 70px;
height: 100px;
background: deepskyblue;
text-align: right;
float: left;
}
可以看出，float元素之间，是按照从左向右，从上到下的顺序，找到空间就摆放在当前位置
?按照同样的方法，让所有元素全部向右浮动 
这次就是按照从右到左，从上到下的顺序摆放
?删除B和C元素，让A浮动，不设置父容器宽高，观察运行结果
A
* {
margin: 0;
padding: 0;
}
.container {
margin: 50px;
width: 300px;
background: yellow;
border: 1px solid red;
}
.block1 {
width: 50px;
height: 80px;
background: orange;
text-align: left;
float: left;
}
由于浮动元素不占据空间，当父容器只有一个浮动元素作为子节点时，默认高度就为0，这个现象叫做【高度塌陷】
?如果我们想父容器和浮动元素保持一样的高度，有两种方法： 一种是增加一个clear=both的空元素来撑大父容器 一种是给父容器设置overflow=auto来让父容器自己改变高度
?clear属性规定元素的哪一侧不允许其他浮动元素 clear属性有left，right，both，inherit几种取值 当不允许悬浮的一侧，有悬浮元素存在时，元素就会换行显示到浮动元素下面
?利用clear元素的这种特性，我们在浮动元素下面，添加一个clear=both的空元素，这个空元素就会撑起父容器的高度
A
B
* {
margin: 0;
padding: 0;
}
.container {
margin: 50px;
width: 300px;
background: yellow;
border: 1px solid red;
}
.block1 {
width: 50px;
height: 80px;
background: orange;
text-align: left;
float: right;
}
.block2 {
background: greenyellow;
clear: both;
}
?当父容器设置了overflow=auto时，子元素是被视为放在滚动面板里面的，如果父容器未设置高度，默认高度就是和整个内容一样大
A
* {
margin: 0;
padding: 0;
}
.container {
margin: 50px;
width: 300px;
background: yellow;
border: 1px solid red;
overflow: auto;
}
.block1 {
width: 50px;
height: 80px;
background: orange;
text-align: left;
float: right;
}
?我们可以对clear=both这种方式进行进一步优化，通过after伪元素来模拟空元素的效果
A
* {
margin: 0;
padding: 0;
}
.container {
margin: 50px;
width: 300px;
background: yellow;
border: 1px solid red;
}
.block1 {
width: 50px;
height: 80px;
background: orange;
text-align: left;
float: left;
}
.container:after {
display: block;
content: "";
clear: both;
}
