浮动的特点:
- 浮动元素脱离标准文档流
- 创建浮动框使文本围绕图像
清除浮动的方法:
方法一:在末尾加上空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