清除浮动 · Leeonfield

为什么清除浮动

因为float会脱离Normal_flow,布局是会出现问题，下面给一个例子。

.outer{border:1px solid #ccc;background-color:#fc9;color:#f5f;margin:50px auto;padding:50px;}
.div1{width:80px;height:80px;background:red;float:left;}
.div2{width:80px;height:80px;background:blue;float:left;}
.div3{width:80px;height:80px;background:green;float:left;}

<div class="outer">
    <div class="div1">float1</div>
    <div class="div2">float2</div>
    <div class="div3">float3</div>
</div>

浮动未清除
途中三个浮动上面的那条白线是整个outer的内容，height值为0，造成这样的原因是float已经脱离了文档流，这显然不是我们想要的，可能上面的内容不能很清楚的描述问题，下面在三个浮动元素后添加非浮动的div。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
</head>
<style type="text/css">
    .outer{border:1px solid #ccc;background-color:#2ecc71;color:#fff;margin:50px auto;padding:50px;}
    .div1{width:80px;height:80px;background:#fff;color:#000;float:left;opacity:0.6;}
    .div2{width:80px;height:80px;background:#34495e;float:left}
    .div3{width:80px;height:80px;background:#9b59b6;float:left}
    .nofloat{height:160px;width: 80px;background:#2980b9;}
</style>
<body>
    <div class="outer">
        <div class="div1">透明float1</div>
        <div class="div2">float2</div>
        <div class="div3">float3</div>
        <div class="nofloat">被覆盖的no float</div>
    </div>
</body>
</html>

没有清除浮动的排版
未浮动元素撑起了outer，但是上半部却被浮动元素遮盖了。

方法小结

看了很多介绍清除浮动的文章，虽然标题是八种方式，实质只是把clear换着姿势用了而已。这里总结了两种情况。

overflow:auto/hidden

先看看效果

 <!-- CSS -->
.outer-flow{overflow:auto; }//auto、hidden都可，auto对于SEO更友好
<!-- HTML -->
<div class="outer outer-flow">
    <div class="div1">float1</div>
    <div class="div2">float2</div>
    <div class="div3">float3</div>
</div>

auto使用效果
这种权宜之计只能把浮动元素放在父元素中，若浮动元素后添加非浮动元素，仍会出现被覆盖的现象。所以需要更靠谱的方法。

clear

clear生来就是为了清除浮动的。

认识clear

今早看到这节内容时，心想clear就这几个参数，还需要注意什么？后来看了篇文章,才意识很多重要的细节我从未接触过，细思恐极。
盲点：

clear是作用于元素自己，对两边的元素并没有影响，甲乙两个div左浮动，现在想让乙浮动到下一行。

1 2	<div style="height:80px;width:80px;float:left;background:#1abc9c">甲</div> <div style="height:80px;width:80px;float:left;background:#3498db">乙</div>

甲乙并列
这时候在甲上用clear:right;是无用的，因为clear作用在甲上，甲右边有浮动元素，而甲却根本无法移动。效果是没效果。
但是乙说:“我可以动呀”

1 2	<div style="height:80px;width:80px;float:left;background:#1abc9c;">甲</div> <div style="height:80px;width:80px;float:left;background:#3498db;clear:left;">乙</div>

第二个盲点是： div的顺序是HTML代码中div的顺序决定的。靠近页面边缘的一端是前，远离页面边缘的一端是后。
即：

<div class="outer" style="overflow: auto">
        <div style="height: 80px;width:80px;float: left;background:#e67e22">float1</div>
        <div style="height: 80px;width:80px;float: left;background:#34495e">float2</div>
        <div style="height: 80px;width:80px;float: left;background:#9b59b6">float3</div>
        <div style="height: 80px;width:80px;float:right;background:#e67e22">float1</div>
        <div style="height: 80px;width:80px;float:right;background:#34495e">float2</div>
        <div style="height: 80px;width:80px;float:right;background:#9b59b6">float3</div>
    </div>

坑补完了，继续说清除浮动。

clear清除浮动

使用{clear:both}进行清除:

想达到上面的效果，可以通过下面的方式

:after伪元素：”:after” 伪元素可以在元素的内容之后插入新内容。那么就可以用这个方法在需要清除的位置插入{clear:both}，应用在本文例子上即:
1
2
3
4
5
6
7
8

.group:after{clear:both;}

<div class="outer group">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

添加具有{clear:both;}属性的元素

空元素:使用含有clear属性的空元素进行清除，这种方法用起来很烦，每次都需要添加这些无意义的语句。

<div class="outer">
    <div class="div1">透明float1</div>
    <div class="div2">float2</div>
    <div class="div3">float3</div>
    <!-- 空div -->
    <div style="clear: both;"></div>
    <!-- br -->
    <br style="clear: both;"/>
    <!-- hr -->
    <hr style="clear: both;"/>
    <div class="nofloat">没有被覆盖</div>
</div>

非空元素:如果浮动元素后面还有还有元素，那么久可以省去空元素语句，直接在后面元素添加{clear:both;}

<div class="outer">
    <div class="div1">透明float1</div>
    <div class="div2">float2</div>
    <div class="div3">float3</div>
    <div class="nofloat" style="clear:both">没有被覆盖</div>
</div>

写完去上课!

参考：//www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

文章目录