清除浮动这个问题，做前端的应该再熟悉不过了，下面介绍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{ width:300px;margin:0 auto;border:10px solid #000;} .p{ width:200px;height:200px;background:red;float:left;} |
示例3：伪类对象::after+zoom:1(推荐使用) | |
|
|
.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代码 |
|
|
|
.box{ width:300px;border:1px solid #000;overflow:auto;} .p1{ width:260px;height:400px;background:Red;float:left;} |
|
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.父级元素浮动
html代码 |
css代码 |
|
|
|
.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样式-如何清除元素浮动？的详细内容。更多信息请关注PHP中文网其他相关文章！
