国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

清除浮動(dòng)的方法

miqt / 851人閱讀

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

清除浮動(dòng)本質(zhì)： 解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問題。

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

清除浮動(dòng)的方法：

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

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

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

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

優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想 結(jié)構(gòu)語義化正確
缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等
4 after偽元素空余字符法
content:"200B";這個(gè)參數(shù)，Unicode字符里有一個(gè)“零寬度空格”，即 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雙偽元素清除浮動(dòng)

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52553.html

相關(guān)文章

  • 清除浮動(dòng)的方法

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

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

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

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

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

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

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

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

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

    摘要：方法三據(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)象： showImg(https://segmentfault.com/img/bVrWvS)...

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

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

    摘要：為什么要清除浮動(dòng)影響其他元素定位父盒子高度為，子盒子全部浮動(dòng)定位，子盒子不會(huì)撐開父盒子，下面的元素會(huì)到子盒子的下面。清除浮動(dòng)方法總結(jié)對(duì)父級(jí)元素設(shè)置高度對(duì)父級(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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<