asp学习网: 首页 >> css教程 >> 网页元素浮动问题的解决方法

网页元素浮动问题的解决方法

方法一、

  使用块级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">

第四种方法目前可以很好的兼容多种浏览器,并且不要加额外的元素就可以完成想要的布局. from:asp学习网/title:网页元素浮动问题的解决方法/ time:2007-11-7 17:32:25

本文主题浮动

CSS元素绝对定位、相对定位 布局和浮动等

after的使用:清除DIV浮动

asp教程 ©2006-2007 aspxuexi.com | 关于站点 | 版权隐私 | 站内搜索
复制或者翻版 请于夜间进行