CSS清除浮动

来源：互联网发布：淘宝流量互换编辑：程序博客网时间：2024/06/10 18:26

浮动的特点:

浮动元素脱离标准文档流
创建浮动框使文本围绕图像

清除浮动的方法:

方法一：在末尾加上空div并设置clear

缺点：增加了无意义的标签

<style>#box{width: 600px;border:1px solid red;}#one{width: 100px;height: 100px;background-color: #000;float: left;}#two{width: 100px;height: 100px;background-color: #666;float: left;}#three{width: 100px;height: 100px;background-color: coral;float: left;}.clear{clear: both;}</style></head><body><div id="box"><div id="one"></div><div id="two"></div><div id="three"></div><div class="clear"></div></div></body>

方法二：给父元素设置高度

缺点:固定高度

#box{width:600px;height:400px;border:1px solid red;}

方法三:overflow属性

缺点:会产生滚动条

#box{width:600px;border:1px solid red;overflow:hidden;}

方法四:使用伪类:after

<div id="box" class="clear">.clear:after{content: "";height: 0;visibility: hidden;display: block;clear: both;}

原理: 不希望新内容占据垂直空间和在页面显示，所以设置height:0,visibility:hidden;因为被清理的元素在它们的顶外边距添加了空间，所以需要将display设置为block

阅读全文

0 0