1.  三個(gè)關(guān)于浮動(dòng)的概念

 不浮動(dòng)float:none;

 清除周圍的浮動(dòng)元素   float:both   這是清除浮動(dòng)的本意

 清除子元素浮動(dòng)對(duì)父元素的影響  clearfix    很多人都理解成這個(gè)叫清除浮動(dòng)。。

2. 什么是清除浮動(dòng)

清除浮動(dòng)不是把當(dāng)前標(biāo)簽的浮動(dòng)給清除了，如果這樣，還加浮動(dòng)做什么

其實(shí)清除浮動(dòng)指的是清楚當(dāng)前元素旁邊的浮動(dòng)元素，但是當(dāng)前元素又不能影響別人，打不贏就跑，所以自己就跑到下面去了。

3. 為什么要清楚浮動(dòng)

在布局的時(shí)候我們經(jīng)常希望某些內(nèi)容能夠水平排布，水平排布后，由于內(nèi)部?jī)?nèi)容不確定，高度不能簡(jiǎn)單的給一個(gè)定值。而如果不給高度，子元素又都浮動(dòng)了，父盒子就會(huì)因?yàn)闆](méi)有子盒子的支撐而塌陷。

利用清除浮動(dòng)的這個(gè)特性，我們可以給父元素中最后一個(gè)不浮動(dòng)的盒子使用clear:both從而把父盒子的高度撐起來(lái)，并且能夠根據(jù)內(nèi)部?jī)?nèi)容的變化而改變高度。

4.  清楚浮動(dòng)的方法

　　4.1.       額外標(biāo)簽法

　　　　原理：單獨(dú)使用一個(gè)標(biāo)簽加上clear:both跑到浮動(dòng)元素下面，從而消除子盒子浮動(dòng)造成的父盒子塌陷。

　　　　優(yōu)點(diǎn)：通俗易懂，容易掌握

　　　　缺點(diǎn)：添加很多無(wú)意義的空標(biāo)簽，不符合結(jié)構(gòu)與表現(xiàn)分離的原則，不利于后期維護(hù)

　　4.2.       父元素設(shè)置overflow：hidden

　　　　原理：讓父盒子形成BFC，BFC的特性之一就是可以承載浮動(dòng)元素

　　　　優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題，代碼量極少

　　　　缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素

　　4.3.       單偽元素

　　   .clearfix:after {
　　　　　　　　content: "";
　　　　　　　　height: 0;
　　　　　　　　visibility: hidden;
　　　　　　　　overflow: hidden;
　　　　　　　　dispaly: block;
　　　　　　　　clear: both;
　　　　}

　　　　.clearfix {
　　　　　　　　zoom: 1;/*IE67*/
　　　　}

　　4.4       雙偽元素

　　　　.clearfix簡(jiǎn)介

　　　　.clearfix:before, .clearfix:after {
   　　　　　　 content: "";
    　　　　　　display: table;

　　　　}/*在有該類的元素內(nèi)部元素的前面和后面添加元素*/

　　　　.clearfix:after {
　　　　　　　　clear: both;
　　　　}/*只要after兩側(cè)有浮動(dòng)元素，after就會(huì)跑到最下面，從而撐開(kāi)帶有該類名的父盒子*/
　　　　.clearfix {
　　　　　　　　*zoom: 1;
　　　　} /*用于兼容IE/7/6*/

 　　　　用display:table是因?yàn)閐isplay:block有空隙

　　　　加了一個(gè)before是為了防止外邊距合并