清除浮动总结

• HTML结构

	<div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

• 给父元素设置高

.parent{
            width: 100%;
            background-color: yellowgreen;
            /*设置padding可以很容易看到父元素高度塌陷*/
            padding: 20px;
            /*给父元素设置高度*/
            height: 200px;
        }
.child1, .child2{
            float: left;
            width: 200px;
            height: 200px;
        } 
.child1{
            background-color: red;
        }
.child2{
            background-color: yellow;
        }   

• 给父元素设置overflow

.parent{
            width: 100%;
            background-color: yellowgreen;
            /*设置padding可以很容易看到父元素高度塌陷*/
            padding: 20px;
            /*给父元素设置overflow*/
            overflow: hidden;
        }

• 给父元素设置float

.parent{
            width: 100%;
            background-color: yellowgreen;
            /*设置padding可以很容易看到父元素高度塌陷*/
            padding: 20px;
            /*父元素设置浮动*/
            float: left;
        }

• 在浮动元素结尾处加一个空标签class="clearfloat"，并设置clear：both

.parent{
            width: 100%;
            background-color: yellowgreen;
            /*设置padding可以很容易看到父元素高度塌陷*/
            padding: 20px;
        }
.clearfloat{
            clear: both;
            /*ie*/
            zoom: 1;
        }

• 给父元素添加class="clearfix"，并在css中加入以下样式

.clearfix:after{
            display: table;
            content: '';
            clear: both;
        }