浮动 （ float css属性）
float ： left right
http://www.w3schools.com/css/css_float.asp
浮动可以让元素在容器中尽量向左或者向右push移动， 这样其他元素会围绕浮动元素，
所谓的其他元素就是浮动元素后面的非浮动元素， 浮动影响的对象之后的元素，这个先后是指元素标签位置的先后次序；并不是展示出来的次序，由于浮动的存在，展示出来的次序，可以不是实际元素标签的顺序，例如 有这种代码 （div[float:left] div[float:right] div）， 最后一个div的内容显示在 第一个 和 第二个div之间， 给人眼错觉好像是实际上的第三个div看起来是第二个。
浮动最初用作 图片周边 有文字围绕效果，后来普遍为布局使用。
清浮动需求
float元素实际上是脱离了HTML文档流，浮动元素的高度是不被外层容器元素计算的，
如果浮动元素仅仅被后续的元素围绕了高度的一半，这个时候添加一个新div块， 要求这个新块能够 在浮动元素的下方一行显示，
按照浮动的实现效果， 新添加的 div块为了实现围绕效果， 还是会从浮动元素的一半开始显示新添加的div。
很多布局情况，要求多个块能够按照float的push排列，同时又能够让float元素像正常的文档元素一样，可以在文档流中被计算高度。
要是实现这个效果，需要引入清浮动 clear。
清浮动理解
clear : left right both
清浮动，就是把之前元素的浮动状态删除，按照正常文档流元素高度来解析之前元素。
http://zzstudy.offcn.com/archives/14575 这个解释的有点意思， float元素，可以理解为边框围绕， 则元素盒子的边必然与浮动元素相邻，清浮动，就是要破除这种相邻， 跟浮动元素不相邻，换行显示。
left -- 是指清浮动元素的 左边框 不能与前面的 浮动元素的边相邻。
right -- 是指清浮动元素的 右边框 不能与前面的 浮动元素的边相邻。
both -- 是指清浮动元素的 左边框 和 右边框 不能与前面的 浮动元素的边相邻。
注释： 这里的左右边是指 清浮动 元素 的 左右边框， 不是指 此元素标签位置 的 左边（前边） 和 右边（后边）
记住所有清浮动元素， 要清理的浮动属性， 是针对此元素标签位置前面的浮动标签元素。
上面说的不能相邻是总体上说法，但是怎样不能相邻，看w3c自己的即使最透彻：
http://www.w3.org/wiki/CSS/Properties/clear
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>