前段时间在给一个朋友帮忙做一个网站的时候，使用div+css布局
比如：
css:
css:
.main {
border: 2px solid red;
width: 400px;
margin: 0 auto;
line-height: 1.6em;
border-image: initial;
}
.content {
border: 5px solid #8FCB67;
border-image: initial;
}
.left {
float: left;
width: 140px;
background: #E9EEDF;
border: 3px solid #090;
height: 90px;
line-height: 1.2em;
border-image: initial;
}
body:
<div class="main" id="main">
<div class="content">
<div class="left">
这是一个左边浮动的的层，这层嵌套于 容器1
</div>
容器1，没有float的设定
</div>
</div>
可是到后来发现一个问题，当left的内容很多的时候就会将footer的内容给盖住（浏览器不同效果不一样，我喜欢各种浏览器都进行测试一下），从网上一查原来这种问题还有一个专业点的名称叫"清除浮动"
好吧，特以成文，留作后用。
首先说什么是css清除浮动？
网上的说法是这样的：
当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适 应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮 动
正确的方法：
在所有的需要进行清除浮动的容器的底部填加一个可以识别的clear元素
比如：
body:
<div class="main" id="main">
<div class="content">
<div class="left">
这是一个左边浮动的的层，这层嵌套于 容器1
</div>
容器1，没有float的设定
<div style="clear:both;background:#def;border:1px solid #ccc;">这是个clear:both的空元素，这个是我们需要的清除浮
动的空元素</div>
</div>
</div>