清除浮動（解決高度坍塌的問題）的方法5種
高度坍塌的根源
常規流盒子的自動高度，在計算時，不會考慮浮動盒子
如果父盒子沒有給高度，但是裡面的子元素浮動，或者絕對定位，固定定位，都會使這個子元素脫離文件流，使父元素不能夠獲取元素的高，也就是不能自適應子元素的高了，既然不能自適應子元素的高了，那麼父元素的高就是0，那麼後面的元素自然 就跑上來了。
方法一：給浮動元素的父輩容器新增高度
缺點: 需要手動新增高度, 如何後面子元素的高度發生變化之後,還行再次修改父輩的高度, 給後期的維護帶來麻煩.
優點: 簡單粗暴直接有效
<style>
*{
padding:0;
margin 這種方法很簡單，就是浮動元素需要多少高度，就給它的父元素設定多少高度，雖然好使，但是不夠靈活。
方法二：使用清除屬性clear
清除浮動，涉及css屬性：clear
- 預設值：none
- left:清除左浮動,該元素必須出現在前面所有左浮動盒子的下方
- right:清除右浮動，該元素必須出現在前面所有右浮動盒子的下方
- both:清楚左右浮動，該元素必須出現在前面所有浮動盒子的下方
clear屬性的含義是避免前面的浮動元素對自己的影響. 所以, 誰不想讓別人影響自己, 就新增到誰身上.
<style>
.contianer{
background-color: deepskyblue;
}
.item{
float: left;
width: 50px;
height: 50px;
background-color: forestgreen;
border: gold solid 1px;
}
.end{
clear: both; /* 處理高度坍塌的問題*/
}
</style>
<body>
<div class="contianer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="end"></div>
</div>
</body>
這種方法的特點就是我們專門設定了一個空盒子來撐起父元素的高度
優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題
缺點：如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
方法三：使用 after 偽元素清除浮動，給父元素新增 clearfix
給一個元素新增一個:after則相當於給這個元素添加了子元素, 而且這個子元素會是他的最後一個兒子.
該樣式在clearfix，即父級元素的最後，添加了一個:after偽元素，通過清除偽元素的浮動，達到撐起父元素高度的目的
。注意到該偽元素的display值為block，即，它是一個不可見的塊級元素（有的地方使用table，因為table也是一個塊級元素）。
<style>
.contianer{
background-color: deepskyblue;
padding: 30px;
}
.item{
width: 50px;
height: 50px;
background-color: forestgreen;
border: gold solid 1px;
float: left;
}
.clearfix::after{
content: "";
display: block; /*插入偽元素是行內元素，要轉化為塊級元素*/
clear: both;
}
.clearfix{
*zoom:1;
} /* *只有IE6,7識別 */
</style>
<body>
<div class="contianer clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
原理：after是在父元素中加一個盒子，這個元素是通過css新增上去的，符合閉合浮動思想，結構語義化正確。
父元素中加一個類名為clearfix 。但是這個方法IE6-IE7不識別，要進行相容，使用zoom:1觸發hasLayout來清除浮動
方法四:給父級元素新增overflow：hidden，建立 bfc
<style>
.box1{
width: 200px;
background-color: aqua;
overflow: auto;
/* 這裡的auto可以是除了visible之外的其他值 */
}
.box1>div{
float: left;
width: 50px;
height: 50px;
background-color: brown;
}
footer{
width: 200px;
height: 100px;
background-color: coral;
clear: both;
}
.box2{
width: 200px;
height: 100px;
background-color: chartreuse;
}
</style>
<body>
<div class="box1">
<div></div>
<div></div>
<div></div>
<footer></footer>
</div>
<div class="box2"></div>
</body>
僅僅只在父級元素上添加了一個值為auto的overflow屬性，父元素的高度立即被撐起，將浮動元素包裹在內。看起來，浮動被清除，浮動不再會影響到後續元素的渲染（嚴格講，這和清除浮動沒有一點關係，因為不存在哪個元素的浮動被清除）。
其實，這裡的overflow值，還可以是除了"visible"之外的任何有效值，它們都能達到撐起父元素高度，清除浮動的目的。
當元素設定了overflow樣式，且值不為visible時，該元素就建構了一個BFC
按照BFC的特點，BFC的高度是要包括浮動元素的，所以父元素的高度被撐起來，達到了清除浮動影響的目的。
方法五：使用 before 和 after 雙偽元素清除浮動
<style>
.box1{
width: 300px;
background: cyan;
}
.box1>div{
width: 70px;
height: 100px;
background-color: yellow;
float: left;
}
.clearfix{
*zoom: 1;
}
.clearfix::before,.clearfix::after{
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="box1 clearfix">
<div></div>
<div></div>
<div></div>
</div>
</body>
這種方法完全符合閉合浮動思想。給父元素加一個類名為clearfix,需要相容IE6-IE7