css之清除区域
清除区域：在css2.1中引入了一个清除区域，当为一个元素使用clear时，他的外边距并没有发生变化，而是这个清除区域使得元素落在了浮动元素的下面。
1 <style type="text/css">
2 *{margin:0;padding:0;}
3 p{border: 1px #66CC00 solid;}
4 img {
5 width:40px;
6 height:40px;
7 float:left;
8 border: 1px #66CC00 solid;
9 }
10 h3{
11 clear:both;
12 border: 1px #66CC00 solid;
13 }
14 div{padding:20px;width:400px;height:400px;}
15 </style>
16 </head>
17
18 <body>
19 <div>
20 <p>我在上面</p>
21 <img src="QQ截图未命名.png" />
22 <h3>我在下面</h3>
23 </div>
2 *{margin:0;padding:0;}
3 p{border: 1px #66CC00 solid;}
4 img {
5 width:40px;
6 height:40px;
7 float:left;
8 border: 1px #66CC00 solid;
9 }
10 h3{
11 clear:both;
12 border: 1px #66CC00 solid;
13 }
14 div{padding:20px;width:400px;height:400px;}
15 </style>
16 </head>
17
18 <body>
19 <div>
20 <p>我在上面</p>
21 <img src="QQ截图未命名.png" />
22 <h3>我在下面</h3>
23 </div>
为h3设置margin-top试试：
1 h3{
2 clear:both;
3 border: 1px #66CC00 solid;
4 margin-top:30px;
5 }
2 clear:both;
3 border: 1px #66CC00 solid;
4 margin-top:30px;
5 }
没有变化，清除区域在起作用了，改变一下：
1 h3{
2 clear:both;
3 border: 1px #66CC00 solid;
4 margin-top:60px;
5 }
2 clear:both;
3 border: 1px #66CC00 solid;
4 margin-top:60px;
5 }
有了16px的间距了，我们可以理解这个margin是相对于“我在上面”计算的，其实是这个清除区域在作怪，我们可以简单的设置一下：
1 <style type="text/css">
2 *{margin:0;padding:0;}
3 p{border: 1px #66CC00 solid;}
4 img {
5 width:40px;
6 height:40px;
7 float:left;
8 border: 1px #66CC00 solid;
9 margin-bottom:20px;
10 }
11 h3{
12 clear:both;
13 border: 1px #66CC00 solid;
14 }
15 div{padding:20px;width:400px;height:400px;}
16 </style>
17 </head>
18
19 <body>
20 <div>
21 <p>我在上面</p>
22 <img src="QQ截图未命名.png" />
23 <h3>我在下面</h3>
24 </div>
2 *{margin:0;padding:0;}
3 p{border: 1px #66CC00 solid;}
4 img {
5 width:40px;
6 height:40px;
7 float:left;
8 border: 1px #66CC00 solid;
9 margin-bottom:20px;
10 }
11 h3{
12 clear:both;
13 border: 1px #66CC00 solid;
14 }
15 div{padding:20px;width:400px;height:400px;}
16 </style>
17 </head>
18
19 <body>
20 <div>
21 <p>我在上面</p>
22 <img src="QQ截图未命名.png" />
23 <h3>我在下面</h3>
24 </div>
效果理想！
为浮动元素设置外边距，而不为“我在下面”（清除元素）设置上外边距，问题就解决了！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？