码迷,mamicode.com
首页 > Web开发 > 详细

html中子div用了浮动怎样让父div的大小自动撑开

时间:2016-01-17 17:36:41      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:

浮动子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="all">子元素

小结:用哪一种方法根据自身情况来使用。

参考原文地址: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>

 

html中子div用了浮动怎样让父div的大小自动撑开

标签:

原文地址:http://www.cnblogs.com/hello-word1/p/5137395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!