這篇文章給大家分享的是有關(guān)css如何去掉浮動的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

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

css去掉浮動的方法：1、父級容器定義“overflow:hidden”樣式；2、浮動結(jié)尾處，添加帶有“clear:both”樣式的div或p標(biāo)簽；3、父級容器定義“overflow:auto”樣式。

浮動是布局的時用到的一種技術(shù)，能夠方便我們進(jìn)行布局。

1、浮動的設(shè)置：  css屬性float：  left/right/none 左浮動/右浮動/不浮動（默認(rèn)）

2、浮動的原理：  使當(dāng)前元素脫離普通流，相當(dāng)于浮動起來一樣，浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣  
 3、浮動的影響：  對附近的元素布局造成改變，使得布局混亂

因為浮動元素脫離了普通流，會出現(xiàn)一種高度坍塌的現(xiàn)象：  原來的父容器高度是內(nèi)部元素?fù)伍_的，但是當(dāng)內(nèi)部元素浮動后，脫離普通流浮動起來，那父容器的高度就坍塌，變?yōu)楦叨?px。

如下圖：

清除浮動的5種方法

1、父級div定義overflow:hidden

	
	
　　
Left
	
　　
Right
	

原理：  使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度。

優(yōu)點：  簡單，代碼少，瀏覽器支持好。

缺點：  必須定義width或zoom:1，不能和position配合使用，因為超出的尺寸的會被隱藏。

建議：  只推薦沒有使用position或?qū)verflow:hidden理解的朋友使用。

2、結(jié)尾處加空div標(biāo)簽 clear:both

    
Left
    
Right
    



    div2

原理：  添加一個空p，利用css提高的clear:both清除浮動，讓父級p能自動獲取到高度。

優(yōu)點：  簡單，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題。

缺點：  不少初學(xué)者不理解原理；  如果頁面浮動布局多，就要增加很多空p，讓人感覺很不爽。

建議：  此方法是以前主要使用的一種清除浮動方法。

3、父級div定義height

	
	
　　
Left
	
　　
Right
	

原理：  父級p手動定義height，就解決了父級p無法自動獲取到高度的問題。

優(yōu)點：  簡單，代碼少，容易掌握。

缺點：  只適合高度固定的布局，要給出精確的高度，如果高度和父級p不一樣時，會產(chǎn)生問題。

建議：  不推薦使用，只建議高度固定的布局時使用。

4、父級div定義overflow:auto

.div1{background:#000080;border:1px solid red;width:98%;overflow:auto}

原理：  同1，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度。

優(yōu)點：  簡單，代碼少，瀏覽器支持好。

缺點：  內(nèi)部寬高超過父級p時，會出現(xiàn)滾動條。

建議：  不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。

5、父級div定義偽類:after和zoom

 　　
Left
  　  
Right
 

優(yōu)點：  瀏覽器支持好，不容易出現(xiàn)怪問題（目前：  大型網(wǎng)站都有使用，如：  騰迅，網(wǎng)易，新浪等等）。  
 缺點：  代碼多，不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持。  

感謝各位的閱讀！關(guān)于css如何去掉浮動就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！