一个div铺满页面的例子,使用float,不清除浮动。
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
.box {
border: 1px solid blue;
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
border: 1px solid green;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<section class="after-box">section 元素</section>
</body>
</html>
效果如下
section元素本来在div之后,现在却跑到了前面,这就是float的影响,所以可以使用clear属性解决。
.after-box {
border: 1px solid green;
width: 500px;
height: 100px;
clear: left;
}
这样div铺满页面的效果就实现了。还有一种方式,使用inline-block:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
.box {
border: 1px solid blue;
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
border: 1px solid green;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<div class="box">div我感觉好像我在漂浮! </div>
<section class="after-box">section 元素</section>
</body>
</html>