web前端开发_清除浮动

简单介绍清除浮动方式。

1. 不清除浮动会怎样

首先为什么要清除浮动？那是因为当你以如下简单例子布局时

<div class="one">
　　<div style="float: left;"></div>
　　<div style="float: left;"></div>
</div>
<div class="second"></div>

为.one,.two设置颜色和宽度，你会发现，second元素和one元素叠在了一起。这是由于浮动元素脱离了文档流排布，当下面紧接着非浮动元素排布时，就会出现此现象。

2. so，怎么清除浮动

这里记录比较常用的三种~

1) 末尾添加空元素做清除

<div>
    <div style="float: left;"></div>
    <div style="float: left;"></div>
    <div style="clear: both;"></div>
</div>

2) 父元素添加overflow zoom

<div style="overflow: auto; zoom: 1;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

3) 利用伪元素清除

<div class="outer">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>
<style type="text/css">
    .outer:after {
        display: block;
        content: '';
        clear: both;
    }
</style>