清除浮动

清除浮动

1、在浮动元素后面添加 clear:both 的空 div 元素

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>

2、 给父元素添加 overflow:hidden 或者 auto 样式，触发BFC

// html
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

// css
.container{
    overflow:hidden;
}

3、使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的

// html
<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

// css
.clearfix:after{
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}