這篇文章主要介紹css浮動(dòng)帶來的影響有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為清澗等服務(wù)建站，清澗等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為清澗企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

css浮動(dòng)帶來的影響：1、由于浮動(dòng)元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素；若沒有給父元素設(shè)置高度，那么父元素就不會(huì)在顯示屏上顯示。2、浮動(dòng)元素不再占用原文檔流的位置，它會(huì)對后面的元素排版產(chǎn)生影響。

我們要知道：浮動(dòng)的框可以左右移動(dòng)，直到遇到另一個(gè)浮動(dòng)框或者遇到它外邊緣的包含框。浮動(dòng)框不屬于文檔流中的普通流，當(dāng)元素浮動(dòng)之后，不會(huì)影響塊級元素的布局，只會(huì)影響內(nèi)聯(lián)元素布局。

此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框的高度小于浮動(dòng)框的時(shí)候，此時(shí)就會(huì)出現(xiàn)“高度塌陷”。

在父元素沒有設(shè)置高度的情況下，如果父元素里的子元素設(shè)置了浮動(dòng)，那么父元素的高就不會(huì)自動(dòng)被撐開的，也就沒有高度值。

顯然這樣設(shè)置浮動(dòng)后出現(xiàn)了一些問題，比如：

• 父元素的margin受到影響，無法實(shí)現(xiàn)上下左右居中，

• 若沒有給父元素設(shè)置高度，浮動(dòng)后父元素的高度沒有被撐開，那么父元素就不會(huì)在顯示屏上顯示。

總結(jié)：浮動(dòng)導(dǎo)致的后果

（1）由于浮動(dòng)元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素；若沒有給父元素設(shè)置高度，那么父元素就不會(huì)在顯示屏上顯示。

（2）與浮動(dòng)元素同級的非浮動(dòng)元素會(huì)跟隨其后，因?yàn)楦?dòng)元素脫離文檔流不占據(jù)原來的位置

（3）如果該浮動(dòng)元素不是第一個(gè)浮動(dòng)元素，則該元素之前的元素也需要浮動(dòng)，否則容易影響頁面的結(jié)構(gòu)顯示

由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對后面的元素排版產(chǎn)生影響，為了解決這些問題，此時(shí)就需要在該元素中清除浮動(dòng)。

浮動(dòng)如何清除？清除浮動(dòng)流程
1.首先對父級進(jìn)行設(shè)置css高度進(jìn)行清除，一般情況下，我們對高度設(shè)置一個(gè)高度，把內(nèi)容高度設(shè)置成100px，上下框?yàn)?px，這樣一來，父級的總體高度就是102px。我們使用高度樣式，但是前提我們要計(jì)算好內(nèi)容的高度。

2.利用clear:both屬性，進(jìn)行清除浮動(dòng)，我們可以在div中放入一個(gè)class="clear樣式，就可以清除浮動(dòng)。

3.對父級div進(jìn)行定義屬性，我們對父級css選擇器定義一個(gè)overflow:hidden樣式，就可以清除父級產(chǎn)生的浮動(dòng)。

以上是“css浮動(dòng)帶來的影響有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：css浮動(dòng)帶來的影響有哪些
本文路徑：http://www.rwnh.cn/article32/jipgsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、小程序開發(fā)、電子商務(wù)、網(wǎng)站制作、App開發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)