接觸前端至今已經2年多了，期間也有陸陸續續的學習，自感前端深似海，有時候學起來就有一種深深的無力感。但是我相信堅持下去必定有所收穫，所以打算改變以前的學習方式，自今天開始做一些知識點的總結，一方面可以自行快捷查閱，另一方面可以幫助到別人，何樂而不為呢？來日方長，各位前端老鐵加油吧！
下面我們進入文章的正題：

清除浮動常見的3種方式

• overflow:hidden
• clear:both
• 偽元素after來清除浮動

實現場景

方法一、

.box{
     overflow:hidden;
 }

　　先找到浮動盒子的父元素，再在父元素中新增一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.
　　注意：一般情況下也不會使用這種方式，因為overflow:hidden有一個特點，離開了這個元素所在的區域以後會被隱藏（overflow:hidden會將超出的部分隱藏起來）.

方法二、（本人常用）

.clear{
　　　clear:both;
}

　　　在浮動的盒子之下再放一個標籤，在這個標籤中使用clear:both，來清除浮動對頁面的影響, 但是有兩種情況：
　　　1.在父標籤內部：會將這個浮動盒子的父盒子高度重新撐開.
　　　2.在父標籤外面：會將這個浮動盒子的影響清除，但是不會撐開父盒子.
　　注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標籤，造成結構的混亂.

方法三、
.clearfix:after{
　　　content:”“;//設定內容為空
　　　height:0;//高度為0
　　　line-height:0;//行高為0
　　　display:block;//將文字轉為塊級元素
　　visibility:hidden;//將元素隱藏
　　　clear:both//清除浮動
}
.clearfix{
　　　zoom:1;為了相容IE
}
類.clearfix應該作用於浮動元素的父親.