在CSS中浮动多用于div的浮动，这与今天的网页布局多采用div+css而不是传统的表格布局有很大的关系，我们这里不讨论那种布局更有优势，因为存在即合理，只能说各有特点。好了开始讲浮动吧。
CSS中的浮动，用属性float控制，例如float:right;元素生成向右移动的块框；
在了解浮动原则之前有必要先清楚几个概念：
HTML文档中的元素可以分为两大类：行内元素和块级元素。
1.行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。它同样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。
2.块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。
另一个是标准流，标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。
1：下面看个在标准流下的块级元素的位置：
CSS代码：
<style type="text/css">
#dome1 {
height: 100px;
width: 300px;
background: #0094ff;
}
#dome2 {
height: 150px;
width: 65px;
background: #f00;
}
#dome3 {
height: 200px;
width: 250px;
background: #ffd800;
}
#dome4 {
height: 150px;
width: 100px;
background: #4800ff;
}
</style>
HTML代码：
<body>
<div id="dome1">1</div>
<div id="dome2">2</div>
<div id="dome3">3</div>
<div id="dome4">4</div>
</body>
其效果显示如下：
从器效果显示图来看，块级元素显示，是从上到下排布的，每一个元素占据一行；
2：看块1右浮动之后的效果图：
HTML中代码相同，值需要修改CSS样式，在其中加上float:right；如下：
#dome1 {
height: 100px;
width: 300px;
background: #0094ff;
float:right;
}
效果图如下：
因为块一被设置成向右浮动，所以块一就脱离标准流了，那么对于其它元素而言，它已经不存在了，所以后面的三个块级元素，按标准流来进行排列，所以块一浮动到右侧，块二被顶到第一行去，后面依次跟上。可能这时候有人会问了，要是第一个块级元素师向左浮动的呢，那这四个块级元素又该怎么排列，又遵循什么样的规则？
3：块一向左浮动：
其效果如上，是的，块2的上部有一些被块1覆盖了，为什么会出现这中情况捏，原因还是刚才讲到的，因为块1发生浮动，导致它已经脱离了标准流，这样就会导致其它的元素在排列的时候当它不存在一样，导致效果如图一样出现被覆盖情况；但如果块2元素中有内容的话，块2中的元素会被看到还是被覆盖呢？
4：块1发生左浮动，块2中的元素是否被覆盖？
在HTML中加入文字：代码如下：
<body>
<div id="dome1">111111111</div>
<div id="dome2">22222222</div>
<div id="dome3">333333</div>
<div id="dome4">444444</div>
</body>
效果图如下：
对，如你所见文字并没有被覆盖，那到底是什么原因导致的捏？这是因为，虽然块1已经脱离了标准流，导致其它的元素当它不存在一样，从而在排列的时候忽略其存在，而事实上也只是当它不存在而已，它还是存在的，它还是会在那里占据一定的空间，所以其文字不会被覆盖，而会在在占据的位置之后显示。
总结：浮动会导致元素脱离标准流，从而在其它元素排列的时候会当它不存在，但它又确实是存在的，会占据位置，这一点在元素中的内容在网页中的显示位置有明显的体现。
说完了浮动，再来说清除浮动；清除浮动，清除谁的浮动，指的是清除该元素的上一个元素，用属性clear来控制，有四个值，分别为none，left，right，both；比如：clear：left；这表示，我不允许在同一行中我的左边出现浮动元素，如果恰巧我的上一个元素就是设置的左浮动，那不好意思，还是得兑现我左边不能出现浮动元素的庄严宣告，那怎么办？就是算你狠，我不跟你斗，我走，我另起一行开始我的生活；以此类推。clear：right；表示同一行的右边不允许出现右浮动的元素；clear：both；就是左右两边都不可以；
1比如：块1右浮动，块2设置clear：right；
CSS代码如下：
#dome1 {
height: 100px;
width: 300px;
background: #0094ff;
float:right;
}
#dome2 {
height: 150px;
width: 65px;
background: #f00;
clear:right;
}
其效果图如下：
对，如你所见，它并没有像我们刚刚开始讲的那样，块2会顶到第一行去，为什么呢，因为块2已经说了，在同一行中我的右边不允许出现右浮动的情况，那只好自己退而求其次了，委屈自己，虽然你已不是标准流中的元素，我本该顶到第一行出的，但我还是没去。在下面另起一行开始新的生活。
