在页面布局时，我们常常会遇到这样一个问题：对子元素采用浮动之后两者会脱离文档流,导致父元素因为没有内容而收缩，隐藏掉我们设置的背景和其他相关样式。这个时候，我们为了清除浮动的影响，一般有以下三种方法：
方法一：添加一个进行清理的元素（例如一个段落标签或换行标签），r然后用clear属性进行清理。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三种清理浮动的方法</title> <style type="text/css"> #main{background-color: #CCC} #div1{ width:30%; float: left; background-color: blue; } #div2{ width: 65%; margin-left: 20px; float: right; background-color: red; } p{ clear: both; } </style> </head> <body> <div id="main"> <div id="div1"> <p>div1</p> </div> <div id="div2"> <p>div2</p> </div> <p>增加p标签</p> </div> </body> </html>
但是这种方法很显然会在页面中增加不必要的标记，一般不使用；
方法二：让父元素进行浮动
#main{
float:left;
}
但是此时，我们后续的内容往往会全部被父元素影响，无法换行，这个时候我们使用某个元素（例如站点页脚）进行清理以便换行。这样当然不会增加多余的标签，但是会使样式表显得凌乱，所以我们更倾向于第三种方法：
方法三：使用overflow:hedden技术，这种方法为大多数人所接受。例如上例中我们在#main下面加上一句： overflow:hidden; 就可以轻松实现我们需要的效果。
自己尝试一下，才可以知道其中道理哦~~