CSS 盒子塌陷问题解决方法float属性使元素脱离了标准流布局，给父盒子造成了“盒子塌陷”。目前解决盒子塌陷的方法

float属性使元素脱离了标准流布局，给父盒子造成了“盒子塌陷”。

目前解决盒子塌陷的方法

第一种给父盒子添加属性overflow:hidden，但是如果是下拉列表的情况，超出的会隐藏。

<head>
<style>
        .box{
            border: 2px solid red;
            overflow: hidden;
        }
        .a,.b{
            float:left;
            width: 100px;
            height: 100px;
        }
        .a{
            background-color: green;
        }
        .b{
            background-color: blue;
        }
        div{
           margin:10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>

第二种是给父盒子固定的高度，但是子盒子变多会溢出。

 .box{
            border: 2px solid red;
            overflow: hidden;
            width: 200px;
            height: 100px;
        }

第三种方式是个父盒子里面添加一个div，设置clear：both清除两边的浮动即可，但是会多出一个div元素，显得很多余。


<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div style="clear: both;"></div>
    </div>
</body>

第四种清除浮动的方法：在style中设置伪类。

 .box:after{
            content: '';
            display: block;
            clear:both;
        }