为什么清除浮动

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

1
2
3
4
.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;}
1
2
3
4
5
<div class="outer">
<div class="div1">float1</div>
<div class="div2">float2</div>
<div class="div3">float3</div>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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

先看看效果

1
2
3
4
5
6
7
8
 <!-- 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的顺序决定的。靠近页面边缘的一端是前,远离页面边缘的一端是后。
    即:
1
2
3
4
5
6
7
8
<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
    <!-- CSS -->
    .group:after{clear:both;}
    <!-- HTML -->
    <div class="outer group">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    </div>
  • 添加具有{clear:both;}属性的元素

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <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;}

      1
      2
      3
      4
      5
      6
      <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