浮动子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

 <!DOCTYPE html>

 <html>

 <head>

  <meta charset="UTF-8">

  <title>HTML5 Canvas画印章</title>

  <style>

     .divCss{

       position: relative;

       width: 1024px;

       height: auto;

       border: 1px solid #999999;

       margin:auto;

       /*display:inline-block;*/

       /*float: left;*/

       /*overflow: hidden;

          zoom:1;*/

     }

     .style{

       position: relative;

       width: 300px;

       height: 400px;

       float: left;

       border: 1px solid #aaaaaa;

       margin:10px;

     }

  </style>

 </head>

 <body>

   <div class="divCss">

     <div class="style"></div>

     <div class="style"></div>

     <div class="style"></div>

     <div style=" clear:both;"></div>

   </div>

 </body>

 </html>

html中子div用了浮动怎样让父div的大小自动撑开（清除浮动）的更多相关文章

  1. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  2. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

  3. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  4. 子div设置float后会导致父div无法自动撑开

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...

  5. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  6. css中子元素浮动，无法自动撑开父元素的解决办法

    <div> <div style="float:left;">left</div> <div style="float:righ ...

  7. div的浮动、清除浮动和布局

    总结: 1.无序列表去除前面的小点点:list-style-type: none; 2.设置左浮动的间距. 外边距:margin :如果设定4个值就是,上右下左的顺序设置 如果设置3个值,那么左和右边 ...

  8. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  9. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

随机推荐

  1. jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...

  2. Android开发环境搭建（图文教程）

    昨天又搭建了一次Android的开发环境,尝试了好几种方式,也遇到了一些问题,在此分享一下. 注意:官网公布的最新版本号的SDK和ADT(23.0.0),对于和Eclipse集成的开发环境是有BUG存 ...

  3. Intent 传值和 Bundle传值的区别

    http://blog.csdn.net/yanzi1225627/article/details/7802819 举个例子  我现在要从A界面   跳转到B界面或者C界面   这样的话 我就需要写2 ...

  4. Android将Activity打成jar包供第三方调用（解决资源文件不能打包的问题）

    转载地址:http://blog.csdn.net/xiaanming/article/details/9257853 最近有一个需要,我们公司做了一个apk客户端,然后其他的公司可以根据自己的需要来 ...

  5. UIImage载入图片的几种方式及差别

    用UIImage载入图像的方法非常多.最经常使用的是几种:  1.使用imageNamed函数载入: <span style="font-size:14px;">[UI ...

  6. AndroidManifest.xml解释说明和android的启动过程

    1.android清单文件:AndroidManifest.xml 说明如下: <?xml version="1.0" encoding="utf-8"? ...

  7. Linux下Ｗireshark普通用户不能获取网络接口问题

    Linux下Wireshark普通用户不能获取网络接口问题 1.安装setcap, setcap 是libcap2-bin包的一部分,一般来说,这个包默认会已经装好. sudo apt-get ins ...

  8. 看懂下面C++代码才说你理解了C++多态虚函数!

    #include <iostream> using namespace std ; class Father { private :  virtual void Say()  //只有添加 ...

  9. Vim程序编辑器

    Vim的三种模式: 1) 一般模式 以 vi 打开一个档案就直接进入一般模式了(这是默认的模式).在这个模式中, 你可以使用『上下左右』按键来移动光标,你可以使用『删除字符』或『删除整行』来处理档案内 ...

  10. git 远程追踪

    $ git branch --set-upstream-to origin/master http://stackoverflow.com/questions/21729560/how-to-make ...