一、浮动的特点

设置 float：left | right

1.脱离文档流，空间释放

2.块元素脱离文档流之后，如果不设置宽高，则默认被其内容撑开，不再单独占一行；行元素脱离文档流之后，可以设置宽高，也可以多个占一行

3.浮动元素会尽量向父元素左上角或者右上角浮动

4.浮动元素不会超过上边的兄弟元素，而且如果浮动元素上边是一个没有设置浮动的元素，该浮动元素不会超过该元素

二、浮动引起的问题

浮动的元素因为脱离文档流，空间释放了，那么它的父元素可能因为没有内容撑开而高度变为零，也被称为浮动塌陷。

1.如果该父元素的高度是是固定的，可以给父元素设置一个写死的高度；

2.父元素 overflow:hidden;

3.给父级div添加伪元素::after

.clearfix::after{
     content:'';
     display:block;
     clear:both;
}
//这三个设置是配套使用的~

4.给父级div定义zoom

.clearfix{
      zoom:1;