本文介绍了一种使用伪元素::after的方法来解决元素浮动导致的布局问题。通过简单的CSS样式设置，可以有效地清除浮动，确保页面布局的正确性。适用于各种浏览器环境，包括IE6等老旧版本。
通过利用伪元素选择器来清除浮动
标签名称::after{
/*设置添加的子元素内容为空*/
content: "";
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素高度为0*/
height: 0;
/*隐藏添加的子元素*/
visibility: hidden;
/*给添加的子元素设置clear: both;属性*/
clear: both;
}
标签名称{
/*兼容ie6*/
*zoom:1;
}
实例代码
<style>
*{
margin: 0px;
padding: 0px;
}
.dd{
background-color: #00ff15;
}
.ddd{
background-color: #ff2000;
}
p{
float: left;
background-color: #e9ff9c;
}
.dd::after{
content:"";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.dd{
*zoom: 1;
}
</style>
<div class="dd">
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
</div>
<div class="wall h20"></div>
<div class="ddd">
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
</div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
