您的位置：首页 > Web前端 > CSS

css 3种清除浮动方法

2016-04-22 10:33 295 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.test{
zoom: 1;
border: 1px solid #f00;
}
.test:after{
display: block;
clear: both;
visibility: hidden;
height: 0;
content: '';
}
</style>
</head>
<body>
<div>
清除浮动 方法1： test{clear:both;} test为浮动元素的下一个兄弟元素 方法2： test{display:block;zoom:1;overflow:hidden;} test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法3： test{zoom:1;} test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

</div>
<div style="border: 1px solid #f00;">
<div style="float: left;">左浮动</div>
<div style="clear: both;">下一个兄弟元素清除浮动</div>
</div>
<div style="border: 1px solid #f00;display: block;zoom: 1;overflow: hidden;margin: 10px 0;">
<div style="float: left;">左浮动</div>
</div>
<div class="test">
<div style="float: left;">左浮动</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航