CSS樣式-如何清除元素浮動？

清除浮動這個問題，做前端的應該再熟悉不過了，以下介紹4種方法給大家參考

1.使用clear:both清除浮動

#  

	#範例1：使用 p
##html程式碼 #css程式碼	#
.box{ width:300px;margin:0 auto;border:10px solid #000;} ##### .p{ width:200px;height:200px;background:red;float:left;}############.clear{ height:0px;font-size:0;clear:both;overflow : hidden;}#########################範例###2:###使用### ################
#      #	.box{ 寬度:300px;邊距:0 自動;邊框:10px 實線#000;} #. p{ width:200px;height:200px;background:red;float:left;}
##範例3 ：偽類別物件::after+zoom:1(建議使用)
# #	#.box{margin:0 auto;border:10px實心#000 ;} .p{寬度：200px；高度：200px；背景：紅色；浮動：左；} 。 ：1;} .清除：之後{顯示：區塊；清除：兩者；內容：「」；可見性：隱藏；高度：0}

#

2.使用overflow#屬性

# 

#html程式碼	css程式碼
#	#.box{ width:300px;border:1px solid #000; overflow:auto;} .p1{ width:260px;height:400px;background:Red;float:left ;} 注意：##overflow:auto;#、##overflow:hidden;都可以

######### ######## ###### ####### #############

3.使用display#屬性

  #  

html程式碼	css程式碼
#	.box{ width:300px;margin:0 auto;border:10px solid # 000; display:inline-block;} .p{ width:200px;height:200px;background:red;float:left;} 注意：父元素不能水平居中，在父元素使用text-align:center解決

###################################################################################################

4.父級元素浮動

margin-left: -150px;

html程式碼	css程式碼
##	< ;/p> .box{ width:300px;margin:0 auto;border:10px solid #000; float:left;} .p{ width:200px;height:200px;background:red;float:left;} ##注意：父元素不能水平居中，可以使用定位解決       #position: relative;	left: 50%;
		#

## 

 

 

######### ###################### ##############

以上是CSS樣式-如何清除元素浮動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！