CSS2 伪元素 :after 清除浮动的影响


浏览器支持

IE6+ 及 Chrome、Firefox、Opera、Safari 等主流浏览器支持

浮动的影响

非浮动的 div 父元素,如果子类是浮动元素的话,那么这个 div 父元素的高度就会坍塌成一条线。看下面的例子:


	.father {
		border: 1px solid red;
	}
	.son {
		width: 100px;
		height: 100px;
		float: left;
		background: blue;
	}


	<div class="father">
		<div class="son"></div>
	</div>

CSS2 伪元素 :after 清除浮动的影响

清除浮动

.clearfloat {
	/* IE6/IE7不支持 :after 使用IE私有的zoom缩放属性让div远离浮动的破坏 */
	*zoom: 1;
}
.clearfloat:after {
	display: block;
	content: "clear";
	height: 0;
	clear: both;
	overflow: hidden;
	visibility: hidden;
}

把上面清除浮动的代码加入到样式表,然后在 div 父元素中调用<div class="father clearfloat">...即可。

CSS2 伪元素 :after 清除浮动的影响


<< CSS2 伪元素 :after/:before CSS2 伪元素 :after 使大小不固定的图片垂直居中显示 >>
  • 作者 建站迷

    建站迷

    让天下没有难做的网站!
    解决中小型企业的无站之伤。



没有账号? 忘记密码?

社交账号快速登录