建站
咨詢
售后
建站咨詢
新聞中心
使用CSS的clear屬性清除浮動(dòng)，如：clear: both;?；蛘邽楦冈靥砑觨verflow屬性，如：overflow: auto;。
清除浮動(dòng)是HTML5中一個(gè)重要的概念，它用于解決父元素中子元素浮動(dòng)后導(dǎo)致的布局問(wèn)題，下面將詳細(xì)介紹如何清除浮動(dòng)：
目前創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、崇義網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
什么是浮動(dòng)？
浮動(dòng)是一種CSS屬性，可以使元素脫離正常的文檔流，并使其向左或向右移動(dòng)，當(dāng)一個(gè)元素設(shè)置為浮動(dòng)時(shí)，它會(huì)自動(dòng)向上移動(dòng)直到其外邊緣與包含塊的邊框?qū)R。
為什么需要清除浮動(dòng)？
當(dāng)一個(gè)父元素中有多個(gè)子元素設(shè)置了浮動(dòng)屬性后，父元素的高度可能會(huì)塌陷，導(dǎo)致布局混亂，為了解決這個(gè)問(wèn)題，需要清除浮動(dòng)，使父元素能夠正確計(jì)算高度。
清除浮動(dòng)的方法
1、使用 clear 屬性
可以在父元素的末尾添加一個(gè)空的塊級(jí)元素，并為其設(shè)置 clear 屬性為 both 或者 left/right，這樣可以使父元素的末尾與浮動(dòng)元素分開(kāi)，從而清除浮動(dòng)。
2、使用偽元素 ::after 或 ::before
可以在父元素的樣式中添加偽元素，并為其設(shè)置 clear 屬性為 both 或者 left/right，通過(guò)偽元素來(lái)清除浮動(dòng)可以達(dá)到相同的效果。
3、使用overflow 屬性
可以將父元素的 overflow 屬性設(shè)置為 auto/hidden/scroll 等值，這樣當(dāng)父元素的內(nèi)容溢出時(shí)會(huì)產(chǎn)生一個(gè)新的塊框，從而清除浮動(dòng)。
示例代碼
相關(guān)問(wèn)題與解答
1、問(wèn)題：為什么浮動(dòng)會(huì)導(dǎo)致父元素的高度塌陷？
解答：當(dāng)子元素設(shè)置了浮動(dòng)后，它們會(huì)脫離文檔流并漂浮在父元素之上，導(dǎo)致父元素?zé)o法正常計(jì)算高度，需要清除浮動(dòng)以恢復(fù)父元素的正常布局。
2、問(wèn)題：除了本文提到的三種方法，還有其他清除浮動(dòng)的方法嗎？
解答：除了本文介紹的三種方法外，還可以使用 float 屬性的 none 值來(lái)清除浮動(dòng)，將父元素的 float 屬性設(shè)置為 none，可以使其不再具有浮動(dòng)特性，從而清除浮動(dòng)。
本文名稱：html5如何清除浮動(dòng)
鏈接地址：http://m.fisionsoft.com.cn/article/djcogeo.html
