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

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

1.使用clear:both清除浮動

樣本1：使用p
html代碼	css代碼
<p class="box"> <p class="p"></p> <p class="clear"></p> </p>	.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:使用<br clear="all">
<p class="box"> <p class="p"></p> <br clear="all"/> </p>	.box{ width:300px;margin:0 auto;border:10px solid #000;} .p{ width:200px;height:200px;background:red;float:left;}
樣本3：偽類對象::after+zoom:1(推薦使用)
<p class="box clear"> <p class="p"></p> </p>	.box{margin:0 auto;border:10px solid #000;} .p{ width:200px;height:200px;background:red;float:left;} .clear{zoom:1;} .clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.使用overflow屬性

html代碼	css代碼
<p class="box"> <p class="p1"></p> </p>	.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代碼
<p class="box"> <p class="p"></p> </p>	.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.父級元素浮動

html代碼	css代碼
<p class="box"> <p class="p"></p> </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%; margin-left: -150px;