css清除浮动

最新推荐文章于 2022-11-23 20:02:54 发布

timelessmemoryli

最新推荐文章于 2022-11-23 20:02:54 发布

阅读量282

点赞数

分类专栏： html+css/html5 文章标签： float clear css

本文链接：https://blog.csdn.net/u014788227/article/details/51967675

版权

html+css/html5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一个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>

timelessmemoryli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css清除浮动

一个div铺满页面的例子，使用float，不清除浮动。CSS.box { border: 1px solid blue; float: left; width: 200px; height: 100px; margin: 1em;}.after-box { border: 1px solid green; width: 500px; height: 100
复制链接

扫一扫