浮动的元素之间是互相贴靠的。但是在实际的工作中，我们是希望同组的元素互相贴靠的，但是不同组的元素之间是不互相贴靠的。第二组的元素不应该与第一组的元素有任何互相的影响。
比如，我们想要的效果是这样的：
但是如果浮动没有清除的话，就会变成这样：
清除浮动有四种方式，一般常选用后两种，根据不同的情况进行选择。
1）加高法：
浮动的元素，只能被有高的盒子关住。但是，工作上绝不会给所有的盒子都加高度，因为这样很麻烦，而且没法适应页面的快速变化。
2）clear：both
最简单的清除浮动的方法，就是给盒子加clear：both，表示自己的内部元素，不受其他元素的影响。但是有个问题，就是margin失效了。
但是盒子中的浮动元素的margin属性并没有失效（个人尝试）。
3）隔墙法：（新浪的前端大部分采用的是这种方式）
在两部分浮动元素之间，建一个墙，隔开两部分浮动（注意是在两个包含浮动元素的盒子中间）。墙要加clear：both属性。用墙自己本身的高度作为两个盒子之间的间隙。
内墙法：将墙放在浮动元素所在的盒子里。与外墙法不同的是，内墙法使得盒子被撑起了高度。第一个图是用外墙法，div盒子的高度。第二张图是用内墙法，div盒子的高度（这个高度是div里所有元素的高度之和，比如里面有两个li标签，每一个li的高度是30px，内墙的高度是10px，那么div盒子的高度就是30+10=40px，因为li元素是浮动的，两个li元素是并排的，所以几个li元素的高都是30px）。
代码部分：（style中的css样式部分是一样的，就是墙的位置是不同的）
效果图也是一样的：
4）overflow:hidden
这个属性的本意是将所有溢出盒子的内容隐藏掉。但是，这个属性可以用于清除浮动。
一个父元素，是不能被自己浮动的子元素撑出高度的。但是，如果给这个父元素加上了overflow：hidden；那么这个父元素就能够被浮动的儿子撑出高度了。
总结：在不同的情景下，应该要选择不同的方式。比较大的结构可以用隔墙法，比较小的结构部分可以用第四种。
例子：要做如下结构的界面。
公告的内容是左浮动的，日期是右浮动的。
对于这种情况，应该用第四种方式去实现。用隔墙法的话不适用。因为在ul标签中只能有li标签，不能在两个li标签之间加入div标签作为墙。而如果在两个li标签之间加li标签作为墙的话，就浪费了语义。如果采用内墙法的话，在li标签内加div标签作为墙的话，就有点兴师动众。所以这个例子采用第四种方式最好，既简单，又使结构很清晰。实现效果图：
下图1是body部分，图2是css样式部分
在li标签中添加了overflow：hidden后，就不会出现堆在一起的情况了。注意，overflow:hidden在这个例子中要添加在li标签中。因为在这个例子中，是以li标签作为组的划分的，而不是div标签。如果将overflow:hidden添加在div标签的样式中，则还是会堆在一起。所以，找到用于划分组的标签很重要。