最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

CSS技术二之clearfix-清除浮动

CSS rockyxia 7342浏览 0评论

在设计中常常会遇到这样的问题:
当容器内部有float样式时,容器的高度不会被撑开。

下面介绍两种方法解决上面的问题

第一种:在浮动元素后面加一个clear: both;比较常见的方法。

缺点:兼容性不强,IE6下div.clear会有高度,需要height:0,overflow:hidden来解决;页面有冗余代码。

第二种方法:clearfix;最完美的解决方法。

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

用法:在浮动外的容器上加一个clearfix类。

<div class="clearfix"></div>

转载请注明:Rockyxia Web技术博客 » CSS技术二之clearfix-清除浮动
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)