成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS清除浮動(dòng)float的三種方法總結(jié)，為什么清浮動(dòng)？浮動(dòng)會(huì)有那些影響？

MAX_zuo / 2021人閱讀

摘要：方法三據(jù)說是最高大上的方法方法注意作用于浮動(dòng)元素的父親先說原理這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他就是利用和來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)清楚浮動(dòng)。

一、拋一塊問題磚（display： block）先看現(xiàn)象： 

分析HTML代碼結(jié)構(gòu)：




    
1

    
2

    
3

分析CSS代碼樣式：

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

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

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

二、清楚css浮動(dòng)：

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

HTML：


    
1

    
2

    
3

CSS：

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

result： （糾正： padding不會(huì)受影響）

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

HTML：

 //這里添加了一個(gè)class
    
1

    
2

    
3

CSS：

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

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

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

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

先說原理：這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他就是利用:after和:before來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽，而outer利用其偽類clear:after在元素內(nèi)部增加一個(gè)類似于div.clear的效果。下面來看看其具體的使用方法：
 .outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
 .outer :after {clear:both;content:".";display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

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

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

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

結(jié)語：清除浮動(dòng)的方式雖然是有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺得最好的方式去做，個(gè)人覺得方法三不錯(cuò)，不需多于的標(biāo)簽，而且也能很好的兼容。再次again：當(dāng)一個(gè)內(nèi)層元素是浮動(dòng)的時(shí)候，如果沒有關(guān)閉浮動(dòng)時(shí)，其父元素也就不會(huì)再包含這個(gè)浮動(dòng)的內(nèi)層元素，因?yàn)榇藭r(shí)浮動(dòng)元素已經(jīng)脫離了文檔流。也就是為什么外層不能被撐開了！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111246.html

相關(guān)文章

  • 簡述清除浮動(dòng)

    摘要：為什么要清除浮動(dòng)影響其他元素定位父盒子高度為，子盒子全部浮動(dòng)定位，子盒子不會(huì)撐開父盒子，下面的元素會(huì)到子盒子的下面。清除浮動(dòng)方法總結(jié)對父級(jí)元素設(shè)置高度對父級(jí)設(shè)置適合高度樣式清除浮動(dòng)，一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置高度設(shè)置為內(nèi)容高度。 為什么要清除浮動(dòng)？ 1、影響其他元素定位父盒子高度為0，子盒子全部浮動(dòng)、定位，子盒子不會(huì)撐開父盒子，下面的元素會(huì)到子盒子的下面。 2.背景圖片或顏...

    FuisonDesign 評(píng)論0 收藏0

  • css清浮動(dòng)

    摘要：元素浮動(dòng)會(huì)讓元素脫離文檔流，從而不能撐開父級(jí)的內(nèi)容。今天我將展示常見的清除浮動(dòng)的方法。什么是浮動(dòng)什么是浮動(dòng)浮動(dòng)元素脫離文檔流并且向左或者向右移動(dòng)，直到浮動(dòng)元素的邊緣碰到父級(jí)框或者另一個(gè)浮動(dòng)元素的邊框?yàn)橹?。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。我們在平常做項(xiàng)目的時(shí)候，float這個(gè)css屬性經(jīng)常會(huì)用到。元素浮動(dòng)會(huì)讓元素脫離文檔流，從而不能撐開父級(jí)的內(nèi)容。今天我將展示常見的清除浮動(dòng)的方法。 什么是浮動(dòng) 浮動(dòng)元...

    EdwardUp 評(píng)論0 收藏0

  • 圍住浮動(dòng)元素的三種方法

    摘要：由于包含元素一定會(huì)包圍非浮動(dòng)的子元素而且清除會(huì)讓這個(gè)子元素位于清除一側(cè)浮動(dòng)元素的下方因此包含元素一定會(huì)包含這個(gè)子元素以及前面的浮動(dòng)元素。 浮動(dòng)元素脫離了文檔流,其父元素也看不到它了,因而也不會(huì)包圍它。這種情況有 時(shí)候并非我們想要的,下面向大家傳授三種圍住浮動(dòng)子元素的方法。記住,這三種 方法你都得掌握,這樣才能審時(shí)度勢,選擇最合適的一種。 為了演示浮動(dòng)元素的行為,這種行為對布局會(huì)產(chǎn)生...

    Bowman_han 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問主要來自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無視浮動(dòng)的元素，但是文本不會(huì)。 作為前端寫了很多頁面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問題：1.浮動(dòng)的原始用途...

    Tonny 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問主要來自于以往的印象浮動(dòng)的元素是脫離文檔流的。也就是說，浮動(dòng)元素的確脫離了文檔流，因此文檔流中的塊框會(huì)無視浮動(dòng)的元素，但是文本不會(huì)。 作為前端寫了很多頁面布局，但是浮動(dòng)這塊一直是我似懂非懂的盲點(diǎn)，一方面用浮動(dòng)能實(shí)現(xiàn)很多布局，另一方面浮動(dòng)造成的影響又會(huì)破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點(diǎn)。 本文主要討論以下幾個(gè)問題：1.浮動(dòng)的原始用途...

    cyqian 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<