知识库

解决HTML元素浮动问题教程

来源: 本站    类别: 知识库    日期: 2016/11/1

 方法一、 
  使用块级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"> 
第四种方法目前可以很好的兼容多种浏览器,并且不要加额外的元素就可以完成想要的布局.

相关文章


Copyright © 2004 - 2022 CNHWW Inc. All Rights Reserved
石家庄市征红网络科技有限公司版权所有 邮政编码:050051
服务电话:0311-85315152 13931185013 在线客服QQ:81447932 / 81447933 邮箱: cnhww@163.com