您的位置:首页 > Web前端 > CSS

CSS-23.清除浮动的常用方式(伪元素内墙)

2018-01-30 09:27 661 查看
通过利用伪元素选择器来清除浮动
标签名称::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>

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: