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>
标签名称::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>
相关文章推荐
- css 清除浮动的两种常用方式
- CSS-21.清除浮动的常用方式(隔墙法)
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- css清除浮动的几种方式
- CSS清除浮动常用方法小结
- CSS清除浮动常用方法小结
- CSS清除浮动元素方法
- CSS清除浮动使父级元素展开
- CSS中clear清除元素容器浮动
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both
- CSS 清除浮动的几种方式
- 关于css清除元素浮动的方法总结(overflow clear floatfix)
- CSS清除浮动常用方法
- CSS清除因为浮动布局导致父元素height值为0的三种方法
- 清除浮动常用的几种方式
- CSS常用清除浮动方法总结
- CSS—清除浮动的几种方式
- 【html/css】清除浮动的几种方式
- css中清除浮动的几种方法(撑起浮动元素父元素的高度)
- css笔记:清除子元素对父元素的浮动效果的三种方法