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

資訊專欄INFORMATION COLUMN

清除浮動的方法

miqt / 854人閱讀

摘要：清除浮動本質(zhì)解決父級元素因為子級浮動引起內(nèi)部高度為的問題。清除浮動的方法選擇器額外標(biāo)簽法推薦的做法是通過在浮動元素末尾添加一個空的標(biāo)簽例如，或則其他標(biāo)簽等亦可。

清除浮動本質(zhì)： 解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題。

         清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

清除浮動的方法：

        選擇器`{clear:left | right | both;}`

1 額外標(biāo)簽法：
W3C推薦的做法是通過在浮動元素末尾添加一個空的標(biāo)簽例如

，或則其他標(biāo)簽br等亦可。
優(yōu)點： 代碼簡潔
缺點： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。
2 父級添加overflow屬性方法
可以通過觸發(fā)BFC的方式，可以實現(xiàn)清除浮動效果。
可以給父級添加： overflow為 hidden|auto|scroll 都可以實現(xiàn)。
優(yōu)點： 代碼簡潔
缺點： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。
3 使用after偽元素清除浮動

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   ie6、7 專有

優(yōu)點： 符合閉合浮動思想 結(jié)構(gòu)語義化正確
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等
4 after偽元素空余字符法
content:"200B";這個參數(shù)，Unicode字符里有一個“零寬度空格”，即 U+200B，代替原來的“.”，可以縮減代碼量。而且不再使用visibility:hidden。

.clearfix:after {content:"200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

當(dāng)然有些網(wǎng)站也用 content:"0200" 的，都是空格的意思。
代表網(wǎng)站： 阿里巴巴等
5 使用before和after雙偽元素清除浮動

.clearfix:before,.clearfix:after{ 
           content:".";
           display:table;
   }
.clearfix:after{
 clear:both;
}
.clearfix{*zoom:1;}

優(yōu)點： 代碼更簡潔
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 小米、騰訊等

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

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

相關(guān)文章

  • 清除浮動的方法

    摘要：前言本文主要介紹清除浮動的種風(fēng)方法及利弊浮動對頁面的影響如果一個父級塊元素中的子元素浮動，那么所有浮動的子元素都脫離了文檔流，如果父元素?zé)o法確定高度，則其下面的兄弟元素會自動補位，造成視圖結(jié)構(gòu)混亂，所以這個時候要進(jìn)行清除浮動。 前言： 本文主要介紹清除浮動的4種風(fēng)方法及利弊 浮動對頁面的影響： 如果一個父級塊元素中的子元素浮動，那么所有浮動的子元素都脫離了文檔流，如果父元素?zé)o法確定高度...

    Alex 評論0 收藏0

  • css浮動現(xiàn)象及清除浮動的方法

    css浮動現(xiàn)象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現(xiàn)文本環(huán)繞圖片的效果。 除了用浮動外，目前暫無其他方法實現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義： 浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

    Kyxy 評論0 收藏0

  • css浮動現(xiàn)象及清除浮動的方法

    css浮動現(xiàn)象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現(xiàn)文本環(huán)繞圖片的效果。 除了用浮動外，目前暫無其他方法實現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義： 浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

    weakish 評論0 收藏0

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

    摘要：方法三據(jù)說是最高大上的方法方法注意作用于浮動元素的父親先說原理這種方法清除浮動是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動，他就是利用和來在元素內(nèi)部插入兩個元素塊，從面達(dá)到清除浮動的效果。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現(xiàn)清楚浮動。 一、拋一塊問題磚（display： block）先看現(xiàn)象： showImg(https://segmentfault.com/img/bVrWvS)...

    MAX_zuo 評論0 收藏0

  • 簡述清除浮動

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

    FuisonDesign 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<