浮动
-
float: left;orfloat: right; - 定义：浮动的元素会脱离原来文档流的位置，一直上升，直到触碰到上一浮动元素的边框或者包裹它的父元素的边框！
清除浮动的主要方法：
- 给父元素定宽高
父元素具有宽高后就不需要子元素撑开自己！而父元素本身没浮动所以不会影响后面的元素布局！ -
overflow:hidden;oroverflow:auto;
//css
.parent{
overflow:hidden;
}
.child{
float: right;
}
//html
<div class= "parent">
<div class="child"></div>
</div>
- 伪元素
::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>
