這篇文章主要介紹“css3清除浮動(dòng)的方式有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3清除浮動(dòng)的方式有哪些”文章能幫助大家解決問(wèn)題。
在巍山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,巍山網(wǎng)站建設(shè)費(fèi)用合理。
方式：1、在一個(gè)空的div標(biāo)簽中設(shè)置“clear:both”樣式來(lái)清除浮動(dòng)；2、給父級(jí)元素添加了一個(gè)“:after”偽元素，通過(guò)清除偽元素的浮動(dòng)來(lái)清除浮動(dòng)；3、給父元素設(shè)置overflow樣式，屬性值不為visible都可以清除浮動(dòng)。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
浮動(dòng)（float）可以控制浮動(dòng)框左右移動(dòng)，直到遇到另一個(gè)浮動(dòng)框或者遇到它外邊緣的包含框。浮動(dòng)框不屬于文檔流中的普通流，當(dāng)元素浮動(dòng)之后，不會(huì)影響塊級(jí)元素的布局，只會(huì)影響內(nèi)聯(lián)元素布局。
此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框的高度小于浮動(dòng)框的時(shí)候，此時(shí)就會(huì)出現(xiàn)“高度塌陷”：
上圖中父元素?fù)伍_(kāi)的高度是padding帶來(lái)的效果，父元素沒(méi)有設(shè)置高度。
在父元素沒(méi)有設(shè)置高度的情況下：
如果父元素里的子元素沒(méi)有設(shè)置浮動(dòng)，那么父元素的高也會(huì)自動(dòng)被撐開(kāi)的，出現(xiàn)高度值；
如果父元素里的子元素設(shè)置了浮動(dòng)，那么父元素的高就不會(huì)自動(dòng)被撐開(kāi)的，也就沒(méi)有高度值。
顯然這樣設(shè)置浮動(dòng)后出現(xiàn)了一些問(wèn)題，比如：
父元素的margin受到影響，無(wú)法實(shí)現(xiàn)上下左右居中，
若沒(méi)有給父元素設(shè)置高度，浮動(dòng)后父元素的高度沒(méi)有被撐開(kāi)，那么父元素就不會(huì)在顯示屏上顯示。
（1）使用clear:both清除浮動(dòng)
在代碼中在放一個(gè)空的div標(biāo)簽，然后給這個(gè)標(biāo)簽設(shè)置clear:both來(lái)清除浮動(dòng)對(duì)頁(yè)面的影響。它的優(yōu)點(diǎn)是簡(jiǎn)單，方便兼容性好，但是一般情況下不建議使用該方法，因?yàn)闀?huì)造成結(jié)構(gòu)混亂，不利于后期維護(hù)
（2）利用偽元素:after來(lái)清除浮動(dòng)
給父級(jí)元素添加了一個(gè):after偽元素，通過(guò)清除偽元素的浮動(dòng)，達(dá)到撐起父元素高度的目的
重慶分公司
重慶分公司
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}（3）使用CSS的overflow屬性
當(dāng)給父元素設(shè)置了overflow樣式，不管是overflow:hidden或overflow:auto都可以清除浮動(dòng)只要它的值不為visible就可以了，它的本質(zhì)就是建構(gòu)了一個(gè)BFC，這樣使得達(dá)到撐起父元素高度的效果
.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}關(guān)于“css3清除浮動(dòng)的方式有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
