css清除浮動float的三種方法總結(jié)，為什么清浮動？float到底是怎么工作的呢

學(xué)習(xí)NO.1

css清除浮動float的三種方法總結(jié)，為什么清浮動？浮動會有那些影響？今天道勤小編就給大家講下關(guān)于css中的float的用法
一、拋一塊問題磚（display： block）先看現(xiàn)象：


我們來分析html代碼結(jié)構(gòu)：

1. <div class="outer">
   
2.     <div class="div1">1</div>
   
3.     <div class="div2">2</div>
   
4.     <div class="div3">3</div>
   
5. </div>

復(fù)制代碼

分析CSS代碼樣式：

1. .outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
   
2. .div1{width: 80px;height: 80px;background: red;float: left;}
   
3. .div2{width: 80px;height: 80px;background: blue;float: left;}
   
4. .div3{width: 80px;height: 80px;background: sienna;float: left;}
   

復(fù)制代碼

這里道勤小編沒有給最外層的DIV.outer 設(shè)置高度，但是我們知道如果它里面的元素不浮動的話，那么這個外層的高是會自動被撐開的。但是當(dāng)內(nèi)層元素浮動后，就出現(xiàn)了一下影響：

    （1）：背景不能顯示 （2）：邊框不能撐開 （3）：margin 設(shè)置值不能正確顯示

二、清楚css浮動：

            方法一：添加新的元素 、應(yīng)用 clear：both；

HTML：

1. <div class="outer">
   
2.     <div class="div1">1</div>
   
3.     <div class="div2">2</div>
   
4.     <div class="div3">3</div>
   
5.     <div class="clear"></div>
   
6. </div>

復(fù)制代碼

CSS：

1. .clear{clear:both; height: 0; line-height: 0; font-size: 0}
   

復(fù)制代碼

result： （糾正： padding不會受影響）

方法二：父級div定義 overflow: auto（注意：是父級div也就是這里的  div.outer）

HTML：

1. <div class="outer over-flow"> //這里添加了一個class
   
2.     <div class="div1">1</div>
   
3.     <div class="div2">2</div>
   
4.     <div class="div3">3</div>
   
5.     <!--<div class="clear"></div>-->
   
6. </div>

復(fù)制代碼

CSS：

1. .over-flow{
   
2.     overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
   
3. }

復(fù)制代碼

結(jié)果：當(dāng)然是實(shí)現(xiàn)了！  img{display: none}; 略圖

    原理：使用overflow屬性來清除浮動有一點(diǎn)需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達(dá)到清除浮動效果，其他兩個值都可以，其區(qū)據(jù)說在于一個對seo比較友好，另個hidden對seo不是太友好，其他區(qū)別我就說不上了，也不浪費(fèi)時(shí)間。

    方法三： 據(jù)說是最高大上的方法  :after 方法：（注意：作用于浮動元素的父親）

    先說原理：這種方法清除浮動是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動，他就是利用:after和:before來在元素內(nèi)部插入兩個元素塊，從面達(dá)到清除浮動的效果。其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個div.clear標(biāo)簽，而outer利用其偽類clear:after在元素內(nèi)部增加一個類似于div.clear的效果。下面來看看其具體的使用方法：

1. .outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
   
2. .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/
   

復(fù)制代碼

其中clear:both;指清除所有浮動；content: '.'; display:block;對于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)清楚浮動。

最后：但不是不重要，也不是不知道！

        下一標(biāo)簽直接清浮動兄弟標(biāo)簽浮動時(shí)，在下一標(biāo)簽的屬性中直接寫入清除clear:both;這樣就可以清除以上標(biāo)簽的浮動而不用加入空標(biāo)簽來清除浮動。

    清楚float的最后結(jié)語：清除浮動的方式雖然是有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺得最好的方式去做，個人覺得方法三不錯，不需多于的標(biāo)簽，而且也能很好的兼容。

    再次提醒下廣大的站長朋友們：當(dāng)一個內(nèi)層元素是浮動的時(shí)候，如果沒有關(guān)閉浮動時(shí)，其父元素也就不會再包含這個浮動的內(nèi)層元素，因?yàn)榇藭r(shí)浮動元素已經(jīng)脫離了文檔流。也就是為什么外層不能被撐開了！

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！