HTML+CSS知识点（十）解决浮动造成的塌陷+overflow用法

float浮动是为了对页面进行横向布局，默认状态下是竖向布局的。设置了浮动就会对父元素造成塌陷。解决父元素塌陷有一下几种方法。

方法一

.container{
            border: 1px solid red;
            height: 200px;
        }
        .container div{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: blue;
        }
        .box2{
            background-color: red;
        }
        .box3{
            background-color: yellow;
        }
        .box4{
            width: 200px;
            height: 200px;
            background-color: black;
        }


 <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <div class="box4"></div>

给父元素一个固定的高度

方法二

.container{