CSS样式

CSS样式-如何清除元素浮动？清除浮动这个问题，做前端的应该再熟悉不过了，下面介绍4种方法给大家参考1.使用clear:both清除浮动示例1：使用phtml代码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;以上就是CSS样式-如何清除元素浮动？的详细内容，更多请关注Gxl网其它相关文章！