CSS浮动与清浮动

浮动（ float css属性）

　　float ： left right

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

http://www.w3schools.com/css/css_float.asp

浮动可以让元素在容器中尽量向左或者向右push移动，这样其他元素会围绕浮动元素，

所谓的其他元素就是浮动元素后面的非浮动元素，浮动影响的对象之后的元素，这个先后是指元素标签位置的先后次序；并不是展示出来的次序，由于浮动的存在，展示出来的次序，可以不是实际元素标签的顺序，例如有这种代码（div[float:left] div[float:right] div），最后一个div的内容显示在第一个和第二个div之间，给人眼错觉好像是实际上的第三个div看起来是第二个。

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.

浮动最初用作图片周边有文字围绕效果，后来普遍为布局使用。

清浮动需求

float元素实际上是脱离了HTML文档流，浮动元素的高度是不被外层容器元素计算的，

如果浮动元素仅仅被后续的元素围绕了高度的一半，这个时候添加一个新div块，要求这个新块能够在浮动元素的下方一行显示，

按照浮动的实现效果，新添加的 div块为了实现围绕效果，还是会从浮动元素的一半开始显示新添加的div。

很多布局情况，要求多个块能够按照float的push排列，同时又能够让float元素像正常的文档元素一样，可以在文档流中被计算高度。

要是实现这个效果，需要引入清浮动 clear。

清浮动理解

clear : left right both

清浮动，就是把之前元素的浮动状态删除，按照正常文档流元素高度来解析之前元素。

w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」。

The clear property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

http://zzstudy.offcn.com/archives/14575 这个解释的有点意思， float元素，可以理解为边框围绕，则元素盒子的边必然与浮动元素相邻，清浮动，就是要破除这种相邻，跟浮动元素不相邻，换行显示。

left -- 是指清浮动元素的左边框不能与前面的浮动元素的边相邻。

right -- 是指清浮动元素的右边框不能与前面的浮动元素的边相邻。

both -- 是指清浮动元素的左边框和右边框不能与前面的浮动元素的边相邻。

注释：这里的左右边是指清浮动元素的左右边框，不是指此元素标签位置的左边（前边）和右边（后边）

记住所有清浮动元素，要清理的浮动属性，是针对此元素标签位置前面的浮动标签元素。

上面说的不能相邻是总体上说法，但是怎样不能相邻，看w3c自己的即使最透彻：

http://www.w3.org/wiki/CSS/Properties/clear

left
Requires that the top border edge of the box be
below the bottom outer edge of any left-floating boxes that resulted
from elements earlier in the source document.

right
Requires that the top border edge of the box
be below the bottom outer edge of any right-floating boxes that resulted
from elements earlier in the source document.

both
Requires that the top border edge of the box be
below the bottom outer edge of any right-floating and left-floating
boxes that resulted from elements earlier in the source document.

W3C清浮动例子

下面网站提供的一个清浮动，分两行显示图片，每一行都向左对齐。

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

<!DOCTYPE html>

<html>

<head>

<style>

.thumbnail {

    float: left;

    width: 110px;

    height: 90px;

    margin: 5px;

}

.text_line {

    clear: left;

    margin-bottom: 2px;

}

</style>

</head>

<body>

<h3>Image Gallery</h3>

<p>Try to resize the browser-window to see what happens when the images does not have enough room.</p>

<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">

<h3 class="text_line">Second row</h3>

<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">

<div>iiiiiii</div>

</body>

</html>

自研clear清左右例子

前面设置了两个浮动块div，左右浮动，第三个div设置clear各种值（left right both none），以观察各种情况下的清浮动情况。

同时为了能看出，清左和清右的效果，将第一个浮动div 设置高度为 100px，第二个浮动div高度设置为 200px。

建议亲自运行下，可容易看出 clear left 和 rigt 效果。

<html>

<head>

        <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->

        <style>

.clear {

     clear: both;

}

        </style>

</head>

<body>

<h1>left + left => clear none</h1>

<div style="float:left;width:200px;height:100px;background:green">这个是第1列，</div>

<div style="float:left;width:400px;height:200px;background:grey">这个是第2列，</div>

<div style="text-align:left; background:yellow; clear:none">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>

<div class="clear"></div>

<h1>left + left => clear left</h1>

<div style="float:left;width:200px;height:100px;background:green">这个是第1列，</div>

<div style="float:left;width:400px;height:200px;background:grey">这个是第2列，</div>

<div style="text-align:left; background:yellow; clear:left">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>

<div class="clear"></div>

<h1>rihgt + right => clear none</h1>

<div style="float:right;width:200px;height:100px;background:green">这个是第1列，</div>

<div style="float:right;width:400px;height:200px;background:grey">这个是第2列，</div>

<div style="text-align:left; background:yellow; clear:none">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>

<div class="clear"></div>

<h1>rihgt + right => clear right</h1>

<div style="float:right;width:200px;height:100px;background:green">这个是第1列，</div>

<div style="float:right;width:400px;height:200px;background:grey">这个是第2列，</div>

<div style="text-align:left; background:yellow; clear:right">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>

<div class="clear"></div>

<h1>left + right => clear none</h1>

<div style="float:left;width:200px;height:100px;background:green">这个是第1列，</div>

<div style="float:right;width:400px;height:200px;background:grey">这个是第2列，</div>

<div style="text-align:left; background:yellow; clear:none">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>

<div class="clear"></div>

<h1>left + right => clear left</h1>

<div style="float:left;width:200px;height:100px;background:green">这个是第1列，</div>

<div style="float:right;width:400px;height:200px;background:grey">这个是第2列，</div>

<div style="text-align:left; background:yellow; clear:left">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>

<div class="clear"></div>

<h1>left + right => clear right</h1>

<div style="float:left;width:200px;height:100px;background:green">这个是第1列，</div>

<div style="float:right;width:400px;height:200px;background:grey">这个是第2列，</div>

<div style="text-align:left; background:yellow; clear:right">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>

<div class="clear"></div>

<h1>left + right => clear both</h1>

<div style="float:left;width:200px;height:100px;background:green">这个是第1列，</div>

<div style="float:right;width:400px;height:200px;background:grey">这个是第2列，</div>

<div style="text-align:left; background:yellow; clear:both">这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。这个是第3列。</div>

<div class="clear"></div>

</body>

</html>