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

資訊專欄INFORMATION COLUMN

CSS清除浮動(dòng)方法大全

FleyX / 851人閱讀

摘要：建議不推薦使用，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。評(píng)分父級(jí)也一起浮動(dòng)原理所有代碼一起浮動(dòng)，就變成了一個(gè)整體優(yōu)點(diǎn)沒有優(yōu)點(diǎn)缺點(diǎn)會(huì)產(chǎn)生新的浮動(dòng)問題。

這篇文章主要介紹了CSS清除浮動(dòng)方法大全(小結(jié))的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧 1、父級(jí)div定義偽類：after和zoom ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Left
Right
div2
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問題 優(yōu)點(diǎn)：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等） 缺點(diǎn)：代碼多，不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持 建議：推薦使用，建議定義公共類，以減少CSS代碼 評(píng)分：★★★★☆ 2.在結(jié)尾處添加空div標(biāo)簽clear:both ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Left
Right
div2
原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度 優(yōu)點(diǎn)：簡單，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題 缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動(dòng)布局多，就要增加很多空div，讓人感覺很不爽 建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法 評(píng)分：★★★☆☆ 3.父級(jí)div定義height ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題 優(yōu)點(diǎn)：簡單，代碼少，容易掌握 缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問題 建議：不推薦使用，只建議高度固定的布局時(shí)使用 評(píng)分：★★☆☆☆ 4.父級(jí)div定義overflow:hidden ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度 優(yōu)點(diǎn)：簡單，代碼少，瀏覽器支持好 缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏 建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用 評(píng)分：★★★☆☆ 5.父級(jí)div定義overflow:auto ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度 優(yōu)點(diǎn)：簡單，代碼少，瀏覽器支持好 缺點(diǎn)：內(nèi)部寬高超過父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條。 建議：不推薦使用，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。 評(píng)分：★★☆☆☆ 6.父級(jí)div也一起浮動(dòng) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理：所有代碼一起浮動(dòng)，就變成了一個(gè)整體 優(yōu)點(diǎn)：沒有優(yōu)點(diǎn) 缺點(diǎn)：會(huì)產(chǎn)生新的浮動(dòng)問題。 建議：不推薦使用，只作了解。 評(píng)分：★☆☆☆☆ 7.父級(jí)div定義display:table ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Left
Right
div2
原理：將div屬性變成表格 優(yōu)點(diǎn)：沒有優(yōu)點(diǎn) 缺點(diǎn)：會(huì)產(chǎn)生新的未知問題 建議：不推薦使用，只作了解 評(píng)分：★☆☆☆☆ 8、結(jié)尾處加br標(biāo)簽clear:both ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Left
Right

div2
原理：父級(jí)div定義zoom:1來解決IE浮動(dòng)問題，結(jié)尾處加br標(biāo)簽clear:both 建議：不推薦使用，只作了解 評(píng)分：★☆☆☆☆ 以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多資料盡在www.if98.com。

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

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

相關(guān)文章

  • 【CSS】三欄/兩欄寬高自適應(yīng)布局大全

    摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語法缺點(diǎn)就是以下不支持。 頁面布局 注意方案多樣性、各自原理、各自優(yōu)缺點(diǎn)、如果不定高呢、兼容性如何 三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng) (1) 給出5種方案 方案一: float (左右浮動(dòng),中間...

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

  • 【CSS】三欄/兩欄寬高自適應(yīng)布局大全

    摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語法缺點(diǎn)就是以下不支持。 頁面布局 注意方案多樣性、各自原理、各自優(yōu)缺點(diǎn)、如果不定高呢、兼容性如何 三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng) (1) 給出5種方案 方案一: float (左右浮動(dòng),中間...

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

  • css新生陌生又常用的屬性大全

    摘要：實(shí)現(xiàn)完整覆蓋字體適配橫豎屏切換偽元素選擇器用法清除浮動(dòng)用法寫對(duì)話框使左右的對(duì)話框分開使內(nèi)容居中用偽類寫出小三角形分別給左右兩邊的小三角形定位左邊對(duì)話框小三角形的邊框樣式右邊對(duì)話框小三角形的邊框樣式吃了 vw,vh,vmin,vmax 實(shí)現(xiàn)完整覆蓋 #mask { height: 100vh; position: fixed; left:0; top:0; } 字體適配(...

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

  • 主流的CSS水平和垂直居中技術(shù)大全

    摘要：水平居中行內(nèi)元素的水平居中在父元素中設(shè)置只對(duì)內(nèi)聯(lián)元素或行內(nèi)塊元素有效需要放置于父元素中塊級(jí)元素的水平居中只對(duì)塊級(jí)元素有效指的是自適應(yīng)寬度。參考張鑫旭實(shí)現(xiàn)絕對(duì)定位元素的居中及原理居中方式水平居中垂直居中塊級(jí)元素設(shè)置內(nèi)聯(lián)元素設(shè)置。 原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個(gè)月也零零散散學(xué)...

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

  • CSS-清除浮動(dòng)

    摘要：清除浮動(dòng)方法方法一使用帶屬性的空元素在浮動(dòng)元素后使用一個(gè)空元素如，并在中賦予屬性即可清理浮動(dòng)。 什么是CSS清除浮動(dòng)？ 在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下，容器的高度不能自動(dòng)伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象...

    劉厚水 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<