亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Alex / 2559人閱讀

摘要：前言本文主要介紹清除浮動(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法確定高度，則其下面的兄弟元素會(huì)自動(dòng)補(bǔ)位，造成視圖結(jié)構(gòu)混亂，所以這個(gè)時(shí)候要進(jìn)行清除浮動(dòng)。

關(guān)于清除浮動(dòng)的方式:

方式一:使用overflow屬性來清除浮動(dòng)

.parent{
    overflow:hidden;
}

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

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

方式二:使用額外標(biāo)簽法

.clear{
    clear:both;
}

　　　　在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來清除浮動(dòng)對(duì)頁面的影響.

　　　　　　a.內(nèi)部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的父盒子高度重新?lián)伍_.

　　　　　　b.外部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的影響清除，但是不會(huì)撐開父盒子.

　　　　注意：一般情況下不會(huì)使用這一種方式來清除浮動(dòng)。因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂.

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

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

方法四:使用雙偽元素清除浮動(dòng)

.clearfix:before,.clearfix:after {

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

}

.clearfix {

zoom: 1;

}

總結(jié)

第一種方法會(huì)將超出部分隱藏在某些時(shí)候我們想清除浮動(dòng)并且保留超出部分時(shí)做不到
第二種方法會(huì)增加許多不必要的標(biāo)簽
推薦使用第三種方法來清除浮動(dòng)
第四種是第三種的改良版，雖然比較簡便,但是不嚴(yán)謹(jǐn)!

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112227.html

相關(guān)文章

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

    css浮動(dòng)現(xiàn)象及清除浮動(dòng)的方法 ? 首先先明確浮動(dòng)最初的定義及使用場(chǎ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)最初的定義及使用場(chǎ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元查看
<