Div + Css 设计网页时浮动问题的解决方法

最新推荐文章于 2025-12-02 22:03:53 发布

翻译最新推荐文章于 2025-12-02 22:03:53 发布 · 737 阅读

文章标签：

#div #css #class #浏览器 #float #html

本文介绍了四种清除HTML中浮动元素的方法：使用块级clear、内联元素清理、双层div巢状及clearfix技术。其中clearfix技术能很好地兼容多种浏览器，并且不需要额外的HTML元素即可实现布局需求。

以前最常用的方法有两种︰

方法一、
使用块级clear，即声明一个块的类属性为

程序代码

.clear {clear:both;}

方法二、
使用内联元素清理，比如说在主浮动内容后跟一个内联元素。

程序代码

.inlineclear {clear:both;}
<span class="inlineclear"></span>

方法三，使用双层div巢状

程序代码

#pubpage {display:block;clear:both;}
#main {display:block;float:left;}
<div id="pubpage">
<div id="main">
内容
</div>
</div>

这样用的话，内部的main就会把浮动给撑起来

方法四、

程序代码

/******clear float*******/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac /*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

加在一个想表示成块的容器的类属性上，但此属性必须为第一个，如<div class="clearfix votelist" id="votelist">

第四种方法目前可以很好的兼容多种浏览器，并且不要加额外的元素就可以完成想要的布局，原文请看这里 http://www.positioniseverything.net/easyclearing.html