css 的 float 与clear
http://www.w3school.com.cn/css/css_positioning_floating.asp
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在
一样(接下来的文本流会围绕在这个浮动块周围)。
使用float属性的元素即被视为块元素(内联元素也会变为块元素)
第一个块浮动起来盖住了第二个块。
但是如果p1和p2都有内容后就不同了
但如果把 <p class="p2">box2</p> 换成 <h1>box2</h1>
看是什么效果
总结：浮动起来的块会把下个非浮动块块覆盖住，但盖不住下个非浮动块的文字和图片。
下个块如果宽度不够则它里面的内容就会被挤到下面。所以要想下个块内容能够在右边展现
则就把下面的块的宽度设宽。
或者让下个非浮动块也浮动起来
使用float属性的元素即被视为块元素(内联元素也会变为块元素)
浮动块在文档流里是不占空间的，通过firebug我们可以看到id 为”container”的父div元素的高度是0（大家可以通过给container元素设置背景色来查看container元素的大小，这里因为它的高度是0，（container 包含浮动块，浮动块中有宽高设置）
float 和clear 使用总结，因为float块不站父容空间，所以父块边框包含不了浮动块解决办法见下：
一、使用clear
二、在父块样式中写入 overflow:auto
对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：
另外一个例子见附件：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在
一样(接下来的文本流会围绕在这个浮动块周围)。
使用float属性的元素即被视为块元素(内联元素也会变为块元素)
第一个块浮动起来盖住了第二个块。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
p{
width:100px;height:100px;margin:0px;border:1px solid #fff;
}
.p1{
background-color:#339900;float:left;
}
.p2{
background-color:#FF9966;
}
</style>
</head>
<body>
<p class="p1"></p>
<p class="p2"></p>
</body>
</html>
但是如果p1和p2都有内容后就不同了
<body>
<p class="p1">box1</p>
<p class="p2">box2</p>
</body>
但如果把 <p class="p2">box2</p> 换成 <h1>box2</h1>
看是什么效果
总结：浮动起来的块会把下个非浮动块块覆盖住，但盖不住下个非浮动块的文字和图片。
下个块如果宽度不够则它里面的内容就会被挤到下面。所以要想下个块内容能够在右边展现
则就把下面的块的宽度设宽。
或者让下个非浮动块也浮动起来
使用float属性的元素即被视为块元素(内联元素也会变为块元素)
浮动块在文档流里是不占空间的，通过firebug我们可以看到id 为”container”的父div元素的高度是0（大家可以通过给container元素设置背景色来查看container元素的大小，这里因为它的高度是0，（container 包含浮动块，浮动块中有宽高设置）
float 和clear 使用总结，因为float块不站父容空间，所以父块边框包含不了浮动块解决办法见下：
一、使用clear
<style type="text/css">
#main {background-color: #3399CC;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
二、在父块样式中写入 overflow:auto
<style type="text/css">
#main {background-color: #3399CC;overflow:auto;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
</div>
对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：
.clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}
另外一个例子见附件：