浮动导致父元素高度塌陷解决办法：清除浮动

基于前辈们的经验，缺点较为突出的几项方案就不写了。

以下主要总结常用方案：

方案一：clear清除浮动

在浮动元素后的同级元素直接用clear清除前一元素的浮动，代码如下：

/*HTML代码*/
        <div class="inner">浮动元素</div>
        <div class="test">clear:both;清除浮动</div>
/*CSS代码*/
        .inner{
            float: left;
        }
        .test{
            clear: both;
        }/*同级子元素不需要浮动，后续第一个子元素需清除浮动*/
           

方案二：伪类清除浮动

一个父级元素内所有子元素都为浮动元素，则在父级元素尾部自动创建一个非浮动块状元素，代码如下：

/*HTML代码*/
    <div class="container">
        <div class="inner">浮动元素</div>
    </div>
    <div>伪类清除浮动</div>
/*CSS代码*/
        .inner{
            float: left;
        }
        .container:after{
            content: "";
            display: block;
            clear: both;
            height:;
            width:;
            visibility :hidden;
            /*加上overflow:hidden之后要计算超出的大小来隐藏，所以父容器会自动撑开自己把所有的子元素放进去，同时会计算浮动的子元素。*/
        }
        .container{zoom: ;}
        /*IE 的独有命令"zoom:1;"，作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 会读取这条命令，其他浏览器则会直接忽略它。*/