成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

清除浮動方式總結(jié)

laoLiueizo / 2183人閱讀

摘要：為什么要清除浮動雖說是清除浮動，其實是清除浮動產(chǎn)生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們布局中需要清除浮動的最重要的原因之一。清除浮動的方法父級定義原理父級手動定義，就解決了父級無法自動獲取到高度的問題。

為什么要清除浮動？

雖說是清除浮動，其實是清除浮動產(chǎn)生的影響。
浮動的元素，高度會塌陷，而高度的塌陷使我們布局中需要清除浮動的最重要的原因之一。

清除浮動的方法： 父級div定義height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優(yōu)點：簡單、代碼少、容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題

建議：不建議使用，只建議高度固定的布局時使用

結(jié)尾處加空div標(biāo)簽 clear:both

原理：添加一個空div，利用CSS提供的clear:both清楚浮動，讓父級div自動獲取高度

優(yōu)點：簡單、代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題

缺點：如果頁面浮動布局多，就要增加很多空div

建議：不推薦使用，但此方法是目前使用很頻繁的一種方法

父級div定義偽類:after和zoom

原理：IE8以上和非IE瀏覽器才支持，原理類似2，zoom（IE專有屬性）可解決ie6，ie7浮動問題

優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。

建議：推薦使用，建議定義公共類，以減少css代碼

父級div定義overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow：hidden時，瀏覽器會自動檢查浮動區(qū)域高度

優(yōu)點：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸會被隱藏

建議：只推薦沒有使用position的朋友

父級div定義overflow：auto

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度

優(yōu)點：簡單、代碼少、瀏覽器支持好

缺點：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條。

建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。

父級div 也一起浮動

原理：所有代碼一起浮動，就變成了一個整體

優(yōu)點：沒有優(yōu)點

缺點：會產(chǎn)生新的浮動問題。

建議：不推薦使用，只作了解。

父級div定義 display:table

原理：將div屬性變成表格

優(yōu)點：沒有優(yōu)點

缺點：會產(chǎn)生新的未知問題。

建議：不推薦使用，只作了解。

結(jié)尾處加 br標(biāo)簽 clear:both

原理：父級div定義zoom:1來解決IE浮動問題，結(jié)尾處加 br標(biāo)簽 clear:both

建議：不推薦使用，只作了解。

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

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

相關(guān)文章

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

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

    MAX_zuo 評論0 收藏0

  • 總結(jié)：清除浮動的方法

    摘要：因為這種清除浮動的方式會增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂方法二父級定義原理使用屬性來清除浮動有一點需要注意，屬性共有三個屬性值。 方法一、在結(jié)尾處添加空div標(biāo)簽clear:both 在浮動的盒子之下再放一個標(biāo)簽，在這個標(biāo)簽中使用clear:both，來清除浮動對頁面的影響. 注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂. ...

    ssshooter 評論0 收藏0

  • 總結(jié)：清除浮動的方法

    摘要：因為這種清除浮動的方式會增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂方法二父級定義原理使用屬性來清除浮動有一點需要注意，屬性共有三個屬性值。 方法一、在結(jié)尾處添加空div標(biāo)簽clear:both 在浮動的盒子之下再放一個標(biāo)簽，在這個標(biāo)簽中使用clear:both，來清除浮動對頁面的影響. 注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標(biāo)簽，造成結(jié)構(gòu)的混亂. ...

    harryhappy 評論0 收藏0

  • 清除浮動的方法

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

    Alex 評論0 收藏0

  • 理解CSS浮動與清除浮動

    摘要：那我們舉個栗子當(dāng)先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同?？偨Y(jié)總結(jié)下來，浮動與清除浮動的順序關(guān)系如下設(shè)置元素浮動，元素脫離文檔流，不計算高度。 本文主要探討兩個問題： 為什么CSS設(shè)置浮動會引起父元素塌陷 為什么設(shè)置clear:both能清除浮動，并撐開父元素。 起因 CSS的浮動，算是我在寫網(wǎng)頁時用的最多的屬性之一。但...

    劉東 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<