css父高度塌陷-清除浮动

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

子元素加clear

在浮动元素后面加一个空的子元素，并给其css属性clear:

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

Clear 取值： left | right | both

left: 清除左浮动

right: 清除右浮动

both: 清除所有浮动

父元素加宽高

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

父元素设置 inline-block

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

父元素设置overflow:hidden

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

父元素利用伪类after

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

clear就可以解决：

    .clear{
      zoom:1;
    }
    .clear::after{
      content:"";
      display:block;
      clear:both;
    }