PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > css教程

CSS样式-如何清除元素浮动？

PHP中文网
PHP中文网 原创
2017-06-22 15:22:29 1273浏览

清除浮动这个问题，做前端的应该再熟悉不过了，下面介绍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;

 

   

 


以上就是CSS样式-如何清除元素浮动？的详细内容，更多请关注php中文网其它相关文章！

PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：css background-image如何平铺？ 下一条：CSS中position属性详解

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！