清除浮动

浮动元素脱离文档流，所以不占位置，当父元素没有设置高度时，不能撑开，导致父元素的高度塌陷，所以需要清除浮动。

方法1 --子元素加clear

在浮动元素后面加一个空的子元素,并给其CSS属性clear ;

<div style= "clear:both"> </div

clear取值: left 清除左浮动| right 清除右浮动|both清除所有浮动

方法2 --父元素加宽高

直接规定父元素的宽高，就不存在塌陷问题了。问题是，父元素的扩展性不好，比如要增加新内容时，又要重新计算高度。

方法3 -父元素设置inline-block

将父元素的display修改成inline-block。问题一起会导致父元素margin : auto失效。

方法4 --父元素设置overflow:hidden

父元素设置overflow:hidden,可以解决。问题是,要配合宽度。

方法5 --父元素利用伪类after

当前最主流的方式，利用伪元素，相当于给父级多加了一个子元素，同时我们可以将样式公用,所有需要清除浮动的父元素加上一个相同的class名clear就可以解决:

.clearfix::after{ 
                  content:' '; /* 必须设置空的content属性才会生效*/
                  height:0;
                  display:block;  /* 转换成块元素  */
                  clear:both;
                }
      }