div+css设计网页时浮动问题的解决方法

时间:2008-10-06 10:32:10  来源:第二电脑网上收集  作者:

  第二电脑网导读:th;}<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,即声明一个块的类属性为.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

有了以上这几种方法,你在用div+Css布局时就不会有那以多的苦恼了。

div+css设计网页时浮动问题的解决方法》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/HTML/2008-10-06/1747.html


关键字:

关于《div+css设计网页时浮动问题的解决方法》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td