浮动溢出

在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

解决方法

html:
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>

css:
.parent{
    margin: 0 auto;
    width: 500px;
    border: 2px solid red;
    padding: 10px;
}
.parent:after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.child1{
    float: left;
    height: 300px;
    width: 200px;
    background: #666666;
    border: 1px solid blue;
}
.child2{
    height: 100px;
    margin-left: 210px;
    background: pink;
    border: 1px solid yellow;
}

方法一：
在html的child2后添加<div class="clear"></div>，css为.clear{clear:both;}
优点：简单，代码少，浏览器支持好　　
缺点：如果页面浮动布局多，则需要很多空标签
方法二：
在parent中添加overflow:auto;
优点：不存在结构和语义化问题，代码量极少　　
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等
方法三:
在parent容器添加一个：after伪元素，并使用content："." 或者为" "在元素的后面生成了内容为一个点的块级元素，并使用一切方法使这个块级元素隐藏并清除浮动clear:both.
.parent:after{
content: ".";/生成一个元素内容为"."，为" "时也好用/
display: block;/让元素为块级元素/
height: 0;/用以下两种方式让元素不渲染/
visibility: hidden;
clear: both;/清除浮动/
}
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
方法四:
让parent容器也浮动，只需给parent容器添加 float：left，也可闭合浮动。
优点：代码少
缺点：会导致整个页面大部分都处于浮动状态，容易出现问题