主页 / 建站知识 /

css clear之清除区域

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

复制代码

代码如下:

<style type="text/css">
{margin:0;padding:0;}
p{border: 1px #66CC00 solid;}
img {
width:40px;
height:40px;
float:left;
border: 1px #66CC00 solid;
}
h3{
clear:both;
border: 1px #66CC00 solid;
}
div{padding:20px;width:400px;height:400px;}
</style>
</head>
<body>
<div>
<p>我在上面</p>
<img src="QQ截图未命名.png" />
<h3>我在狼蚁网站SEO优化</h3>
</div>

效果

为h3设置margin-试试

复制代码

代码如下:

h3{
clear:both;
border: 1px #66CC00 solid;
margin-:30px;
}

来看看效果

没有变化，清除区域在起作用了，改变一下

复制代码

代码如下:

h3{
clear:both;
border: 1px #66CC00 solid;
margin-:60px;
}

效果

有了16px的间距了，我们可以理解这个margin是相对于“我在上面”计算的，其实是这个清除区域在作怪，我们可以简单的设置一下

复制代码

代码如下:

<style type="text/css">
{margin:0;padding:0;}
p{border: 1px #66CC00 solid;}
img {
width:40px;
height:40px;
float:left;
border: 1px #66CC00 solid;
margin-bottom:20px;
}
h3{
clear:both;
border: 1px #66CC00 solid;
}
div{padding:20px;width:400px;height:400px;}
</style>
</head>
<body>
<div>
<p>我在上面</p>
<img src="QQ截图未命名.png" />
<h3>我在狼蚁网站SEO优化</h3>
</div>

效果

效果理想！

为浮动元素设置外边距，而不为“我在狼蚁网站SEO优化”（清除元素）设置上外边距，问题就解决了！

上一篇：IE8 css overflow:hidden不起作用下一篇：区分IE6，IE7，IE8和FF的css hack

Copyright © 2016-2025 www.168986.cn 狼蚁网络版权所有 Power by