浅谈CSS 高度塌陷问题

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
</div>
<div class="second">
    second
</div>
<div class="third">
    third
</div>

.first{
    width: 300px;
    background-color: pink;
}
.first .first-child1,.first .first-child2{
    float: left;
    width: 100px;
    height: 100px;
}
.first .first-child1{
    background-color: purple;
    margin-right: 10px;
}
.first .first-child2{
    background-color: red;  
}
.second{
    width: 200px;
    height: 150px;
    background-color: blue;
}
.third{
    width: 100px;
    height: 150px;
    background-color: green;
}

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
    <div style="clear: both;"></div>
</div>

.clearfix{
    overflow: hidden;
}

.clearfix::after{
    content: "";/伪元素内容为空/
    display: block;/非默认的就行，也可以是table等等/
    height: 0;/伪元素高度为0，不影响其他元素/
    clear: both;/清除浮动/
    visibility: hidden;/不可见/
}
.clearfix{
    zoom: 1;/ie6元素没有BFC模式，这句代码会开启ie6中的hasLayout模式，只在ie中支持/
}

.clearfix::after{
    content: "";/伪元素内容为空/
    display: block;/非默认的就行，也可以是table等等/
    height: 0;/伪元素高度为0，不影响其他元素/
    clear: both;/清除浮动/
    visibility: hidden;/不可见/
}
.clearfix{
    zoom: 1;/ie6元素没有BFC模式，这句代码会开启ie6中的hasLayout模式，只在ie中支持/
}

.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;/ie6元素没有BFC模式，这句代码会开启ie6中的hasLayout模式，只在ie中支持/
}