浮动的用处

1）原理

元素浮动后排除到普通文档流之外

元素浮动后在页面中不占据位置（原位置不保留）

浮动元素碰到父元素的边框或者浮动元素的边框就会停止

浮动不会层叠

浮动只有左右，没有上下

浮动后所有元素转换为块级元素

元素浮动后，后面的文字不会被覆盖

2）语法

float:left/right/none

浮动让块级元素水平排列

3）清除浮动的影响

子元素浮动后在页面中不占据位置，如果父元素不设置高度，父元素的高度会坍塌，会对后面元素产生影响

清除浮动的方法：

1.给浮动元素的父元素加高（高度已知）

2.给浮动元素的父元素加overflow:hidden/auto   （自动找高，但子元素溢出父元素会直接隐藏掉）

3.给受影响的元素加clear:left/right/both;(浮动元素的父元素高度没有找到)

4.空div法（页面中会增加空的div,浮动元素的父元素高度可以找到）

在浮动元素后加一个空的div

空div{clear：both;}

5.伪对象法

浮动元素的父元素：：after{

contect:"";

display:block;

clear:both;

}