知識庫

解決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 - 2019 CNHWW Inc. All Rights Reserved
石家莊市征紅網絡科技有限公司版權所有 郵政編碼:050051
服務電話:0311-85315152 13931185013 在線客服QQ:81447932 / 81447933 郵箱: [email protected]
江苏e球彩视频直播