您的位置：首页 > Web前端 > CSS

css中解决div撑开问题

2018-02-26 18:14 190 查看

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航