1、為什么使用浮動
為了解決幾個塊級元素并排顯示問題，雖然可以使用定義塊級元素的display為inline-block（這種方式也不會出現(xiàn)父級元素坍塌問題）但是這種方式不能控制元素的位置而是默認從左到右，所以要實現(xiàn)元素是居左還是居右使用浮動更方便。
2、為什么清除浮動
解決父級高度塌陷問題
3、如何清除浮動
1）父元素添加overflow:hidden
缺點：超出邊框的內(nèi)容會被隱藏。
問題：當組先級元素相對定位，父元素overflow：hidden；時，子元素超出部分不隱藏，如下圖：child元素超出部分沒有被隱藏
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.grandfather {
position: relative;
width: 400px;
height: 400px;
background-color: pink;
}
.dad{
width:300px;
height:300px;
background-color: blue;
overflow: hidden;
}
.child{
position:absolute;
width: 600px;
height: 600px;
background-color: red;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="dad">
<div class="child"></div>
</div>
</div>
</boy>
</html>
2）父元素添加clear:both;
缺點：margin失效。不推薦
3）父元素添加偽元素::after，設置clear:both，比較推薦
.clearfix::after{
content:’’;
clear:both;
display:block; /*轉(zhuǎn)為塊級元素*/
}
優(yōu)點：父元素被子元素內(nèi)容撐開（父元素有高度），比較方便也符合語義化
缺點：IE6/IE7不識別:after偽元素，存在兼容性問題
4）在兩個父盒子之間“隔墻”(加一個冗余元素div)
上下兩個父盒子的margin失效，需要將該"墻"設置高度當縫隙
浮動.jpg
缺點：必要在頁面添加很多沒有意義的冗余元素，過于麻煩，而且不符合語義化
5）給父級元素單獨定義高度
優(yōu)點：簡單、代碼少、容易掌握。
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題。對于響應式布局會有很大影響。
