HTML清除浮动的几种方法
1.父元素浮动
给父元素设置浮动后,子元素的浮动会归位,不过如果还有父元素,还需要设置。不推荐使用。
2.空标签设置
在元素末尾插入一个无意义标签,并且设置css为clear:both;
<div style="background: #000;"> <p style="float: left;color:#fff"> 我是浮动内容 </p> <div style="clear: both;"></div> </div>
3.设置伪类方式
使用伪类的:after方式,给清除浮动,比较流行使用这个。
<style type="text/css"> .clearfix:after{ content: '.'; display: block; height: 0; clear: both; visibility: hidden; } </style> <div style="background: #000;" class="clearfix"> <p style="float: left;color:#fff"> 我是浮动内容 </p> </div>
上面的css可以进一步优化
.clearfix:after{ content: ''; display: table; clear: both; }
4.显示方式属性
给父元素设置overflow,即可清除里面的浮动
<div style="background: #000;overflow: auto;"> <p style="float: left;color:#fff"> 我是浮动内容 </p> </div>
BFC属性
只要触发了bfc,就会清除浮动
相关触发:
overflow: auto; overflow: hidden; display: inline-block; display: table-cell; display: table-caption; position: absolute; position: fixed; float: left; float: right;
版权声明:
作者:applek
链接:http://www.lovestu.com/htmlclearfix.html
文章版权归作者所有,未经允许请勿转载。
THE END