CSS浮动与常用清除方法！

浮动

• float: left; or float: right;
• 定义：浮动的元素会脱离原来文档流的位置，一直上升，直到触碰到上一浮动元素的边框或者包裹它的父元素的边框！

清除浮动的主要方法：

1. 给父元素定宽高
   父元素具有宽高后就不需要子元素撑开自己！而父元素本身没浮动所以不会影响后面的元素布局！
2. overflow:hidden; or overflow:auto;

//css
.parent{
overflow:hidden;
}
.child{
float: right;
}
 //html
<div class= "parent">
<div class="child"></div>
</div>

1. 伪元素::after 添加clear：both;

//css
.parent::after{
content: .;
display: block;
height:0;
visibility:hidden;
clear:both;
}
//一般定义.clearfix类，直接添加到要清除浮动的父元素上，可复用，不用重复定义； 
.child{
float: right;
}
 //html
<div class= "parent">
<div class="child"></div>
</div>