資訊專欄INFORMATION COLUMN
摘要：為什么要清除浮動(dòng)雖說(shuō)是清除浮動(dòng)，其實(shí)是清除浮動(dòng)產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們布局中需要清除浮動(dòng)的最重要的原因之一。清除浮動(dòng)的方法父級(jí)定義原理父級(jí)手動(dòng)定義，就解決了父級(jí)無(wú)法自動(dòng)獲取到高度的問(wèn)題。
為什么要清除浮動(dòng)？
雖說(shuō)是清除浮動(dòng)，其實(shí)是清除浮動(dòng)產(chǎn)生的影響。
浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們布局中需要清除浮動(dòng)的最重要的原因之一。
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題
建議：不建議使用，只建議高度固定的布局時(shí)使用
結(jié)尾處加空div標(biāo)簽 clear:both原理：添加一個(gè)空div，利用CSS提供的clear:both清楚浮動(dòng)，讓父級(jí)div自動(dòng)獲取高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少，瀏覽器支持好，不容易出現(xiàn)怪問(wèn)題
缺點(diǎn)：如果頁(yè)面浮動(dòng)布局多，就要增加很多空div
建議：不推薦使用，但此方法是目前使用很頻繁的一種方法
父級(jí)div定義偽類:after和zoom原理：IE8以上和非IE瀏覽器才支持，原理類似2，zoom（IE專有屬性）可解決ie6，ie7浮動(dòng)問(wèn)題
優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少css代碼
父級(jí)div定義overflow:hidden原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow：hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽鐣?huì)被隱藏
建議：只推薦沒(méi)有使用position的朋友
父級(jí)div定義overflow：auto原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過(guò)父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條。
建議：不推薦使用，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。
父級(jí)div 也一起浮動(dòng)原理：所有代碼一起浮動(dòng)，就變成了一個(gè)整體
優(yōu)點(diǎn)：沒(méi)有優(yōu)點(diǎn)
缺點(diǎn)：會(huì)產(chǎn)生新的浮動(dòng)問(wèn)題。
建議：不推薦使用，只作了解。
父級(jí)div定義 display:table原理：將div屬性變成表格
優(yōu)點(diǎn)：沒(méi)有優(yōu)點(diǎn)
缺點(diǎn)：會(huì)產(chǎn)生新的未知問(wèn)題。
建議：不推薦使用，只作了解。
結(jié)尾處加 br標(biāo)簽 clear:both原理：父級(jí)div定義zoom:1來(lái)解決IE浮動(dòng)問(wèn)題，結(jié)尾處加 br標(biāo)簽 clear:both
建議：不推薦使用，只作了解。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115085.html
摘要：方法三據(jù)說(shuō)是最高大上的方法方法注意作用于浮動(dòng)元素的父親先說(shuō)原理這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他就是利用和來(lái)在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清楚浮動(dòng)。 一、拋一塊問(wèn)題磚（display： block）先看現(xiàn)象： showImg(https://segmentfault.com/img/bVrWvS)...
摘要：因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽，造成結(jié)構(gòu)的混亂方法二父級(jí)定義原理使用屬性來(lái)清除浮動(dòng)有一點(diǎn)需要注意，屬性共有三個(gè)屬性值。 方法一、在結(jié)尾處添加空div標(biāo)簽clear:both 在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來(lái)清除浮動(dòng)對(duì)頁(yè)面的影響. 注意：一般情況下不會(huì)使用這一種方式來(lái)清除浮動(dòng)。因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽，造成結(jié)構(gòu)的混亂. ...
摘要：因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽，造成結(jié)構(gòu)的混亂方法二父級(jí)定義原理使用屬性來(lái)清除浮動(dòng)有一點(diǎn)需要注意，屬性共有三個(gè)屬性值。 方法一、在結(jié)尾處添加空div標(biāo)簽clear:both 在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來(lái)清除浮動(dòng)對(duì)頁(yè)面的影響. 注意：一般情況下不會(huì)使用這一種方式來(lái)清除浮動(dòng)。因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽，造成結(jié)構(gòu)的混亂. ...
摘要：前言本文主要介紹清除浮動(dòng)的種風(fēng)方法及利弊浮動(dòng)對(duì)頁(yè)面的影響如果一個(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ì)頁(yè)面的影響： 如果一個(gè)父級(jí)塊元素中的子元素浮動(dòng)，那么所有浮動(dòng)的子元素都脫離了文檔流，如果父元素?zé)o法確定高度...
摘要：那我們舉個(gè)栗子當(dāng)先聲明一個(gè)元素向左浮動(dòng)時(shí)，由于脫離文檔流，這個(gè)元素的右邊就會(huì)空出一片空間，空間的長(zhǎng)寬與浮動(dòng)元素長(zhǎng)寬相同。總結(jié)總結(jié)下來(lái)，浮動(dòng)與清除浮動(dòng)的順序關(guān)系如下設(shè)置元素浮動(dòng)，元素脫離文檔流，不計(jì)算高度。 本文主要探討兩個(gè)問(wèn)題： 為什么CSS設(shè)置浮動(dòng)會(huì)引起父元素塌陷 為什么設(shè)置clear:both能清除浮動(dòng)，并撐開(kāi)父元素。 起因 CSS的浮動(dòng)，算是我在寫(xiě)網(wǎng)頁(yè)時(shí)用的最多的屬性之一。但...
閱讀 2422·2021-11-24 09:39
閱讀 3247·2021-10-09 09:53
閱讀 1138·2021-09-22 16:06
閱讀 4462·2021-09-02 10:18
閱讀 806·2021-08-23 09:42
閱讀 1770·2021-08-17 10:11
閱讀 2691·2019-08-30 13:02
閱讀 2128·2019-08-30 12:49
