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

資訊專欄INFORMATION COLUMN

清除浮動的方法

Alex / 2504人閱讀

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

前言：

本文主要介紹清除浮動的4種風方法及利弊

浮動對頁面的影響：

如果一個父級塊元素中的子元素浮動，那么所有浮動的子元素都脫離了文檔流，如果父元素無法確定高度，則其下面的兄弟元素會自動補位，造成視圖結(jié)構(gòu)混亂，所以這個時候要進行清除浮動。

關于清除浮動的方式:

方式一:使用overflow屬性來清除浮動

.parent{
    overflow:hidden;
}

　　　　先找到浮動盒子的父元素，再在父元素中添加一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.

　　　　注意：一般情況下也不會使用這種方式，因為overflow:hidden有一個特點，離開了這個元素所在的區(qū)域以后會被隱藏（overflow:hidden會將超出的部分隱藏起來）.

方式二:使用額外標簽法

.clear{
    clear:both;
}

　　　　在浮動的盒子之下再放一個標簽，在這個標簽中使用clear:both，來清除浮動對頁面的影響.

　　　　　　a.內(nèi)部標簽：會將這個浮動盒子的父盒子高度重新?lián)伍_.

　　　　　　b.外部標簽：會將這個浮動盒子的影響清除，但是不會撐開父盒子.

　　　　注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標簽，造成結(jié)構(gòu)的混亂.

方法三:使用偽元素來清除浮動(after意思:后來,以后)

.clearfix:after{
    centent:"";//設置內(nèi)容為空
    height:0;//高度為0
    line-height:0;//行高為0
    display:block;//將文本轉(zhuǎn)為塊級元素
    visibility:hidden;//將元素隱藏
    clear:both//清除浮動
}
.clearfix{
    zoom:1;為了兼容IE
}

方法四:使用雙偽元素清除浮動

.clearfix:before,.clearfix:after {

content: "";    
display: block;    
clear: both;

}

.clearfix {

zoom: 1;

}

總結(jié)

第一種方法會將超出部分隱藏在某些時候我們想清除浮動并且保留超出部分時做不到
第二種方法會增加許多不必要的標簽
推薦使用第三種方法來清除浮動
第四種是第三種的改良版，雖然比較簡便,但是不嚴謹!

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112227.html

相關文章

  • 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)上最拉風的一種清除浮動，他就是利用和來在元素內(nèi)部插入兩個元素塊，從面達到清除浮動的效果。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現(xiàn)清楚浮動。 一、拋一塊問題磚（display： block）先看現(xiàn)象： showImg(https://segmentfault.com/img/bVrWvS)...

    MAX_zuo 評論0 收藏0

  • 簡述清除浮動

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

    FuisonDesign 評論0 收藏0

發(fā)表評論

0條評論

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