第75题：清除浮动的方式？

[zxdfe]

清除浮动主要是为了防止父元素塌陷

方法一：clearfix伪类

<div class="outer clearfix">
    <div class="inner">inner</div>
</div>
<style>
.outer{
    background: blue;
}
.inner{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
</style>
解析原理：
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

方法二：额外加一个div， clear:both

<div class="container">
    <div class="inner"></div>
    <div class="clear"></div>
</div>
.container{
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clear{
    clear:both;
}

方法三 ： 触发父盒子BFC, overflow:hidden;

<div class="outer">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
    overflow: hidden;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}

[2734209032]

1.格外标签法，不推荐 2.给父盒子设置高度 3.触发BFC 4.after伪元素 5.双伪元素法