html中子div用了浮動怎樣讓父div的大小自動撐開(清除浮動)


浮動子div撐開父div的幾種方法:

(1)在父div中在添加一個清除浮動的子div<div style=" clear:both;"></div>,該div不設置任何樣式,只用來清除浮動

(2)在父div的css樣式中設置overflow:hidden;zoom:1;

(3)設置父div也為浮動元素float:left;,這樣設置的壞處是不能用margin:auto;實現居中

(4)設置父元素display:inline-block;,這樣設置的壞處是不能用margin:auto;實現居中

(5)在父div中添加<br clear="both">子元素

(6)給父元素引用clearfix樣式(未試過)

  clearfix{

    zoom:1;

  }

  clearfix:after{

    content:"";

    display:block;

    claer:both;

  }

小結:用哪一種方法根據自身情況來使用。

參考原文地址:http://www.jb51.net/css/173074.html

     http://www.jb51.net/article/43261.htm

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4  <meta charset="UTF-8">
 5  <title>HTML5 Canvas畫印章</title>
 6  <style>
 7     .divCss{
 8       position: relative;
 9       width: 1024px;
10       height: auto;
11       border: 1px solid #999999;
12       margin:auto;
13       /*display:inline-block;*/
14       /*float: left;*/
15       /*overflow: hidden;
16          zoom:1;*/
17     }
18     .style{
19       position: relative;
20       width: 300px;
21       height: 400px;
22       float: left;
23       border: 1px solid #aaaaaa;
24       margin:10px;    
25     }
26  </style>
27 </head>   
28 <body>
29   <div class="divCss">
30     <div class="style"></div>
31     <div class="style"></div>
32     <div class="style"></div>
33     <div style=" clear:both;"></div> 
34   </div>
35 </body>
36 </html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM