<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>清除浮动的三种方法</title>
<style type="text/css">
.div3{
background: blue;
border: 1px solid gold;
}
.div3:after{
clear: both;
content: ".";
height: 0;
display: block;
visibility: hidden;
}
</style>
</head>
<body>
<div style="background: blue;border: 1px solid gold;">
使用空标签清除浮动。增加了无意义的结构元素
<div style="float: left; background:#cccccc; line-height:100px;">left</div>
<div style="float: right; background:#cccccc; line-height:200px;">right</div>
<div style="clear: both;"></div>
</div>
<div style="background: blue;border: 1px solid gold; overflow: hidden; zoom:1;">
使用overflow属性。使用overflow的时候,可能会对页面表现带来影响。
<div style="float: left; background:#cccccc; line-height:100px;">left</div>
<div style="float: right; background:#cccccc; line-height:200px;">right</div>
</div>
<div class="div3">
使用after伪对象清除浮动。该方法只适用于非IE浏览器。
<div style="float: left; background:#cccccc; line-height:100px;">left</div>
<div style="float: right; background:#cccccc; line-height:200px;">right</div>
</div>
</body>
</html>
清除浮动的三种方法
最新推荐文章于 2022-07-09 19:43:34 发布