浮动子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. LR(1)表生成算法演示程序

    /* * LR 转换表 * + Goto 记录表 * + 状态转换表 */ #include <stdio.h> #include <stdlib.h> #include &l ...

  2. MySQL外键约束On Delete、On Update各取值的含义

    主键.外键和索引的区别?   主键 外键 索引 定义: 唯一标识一条记录,不能有重复的,不允许为空 表的外键是另一表的主键, 外键可以有重复的, 可以是空值 主索引(由关键字PRIMARY定义的索引) ...

  3. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  4. 抓取用户openid

    获取用户微信openid用户无感知情况下 传参为 appid appsecret 当前网址 session_name名称 <?php //获取微信的openid function get_wx_ ...

  5. js去除空格

    function trim(str){ return str.replace(/(^\s*) | ( \s*$ )/g,"" ); }

  6. oninput,onpropertychange,onchange的用法和区别

    1.前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”.如下图所示: 因此,稍微研究了一下oninput,onpropertychange, ...

  7. SQL2008和SQL2000可以跨服务器连接查询的测试实例

    测试目的: SQL2008 和 SQL2000 是否可以跨服务器连接查询 -- 测试环境: --A 虚拟机 XP ( IP : .0.0.213 )安装 SQL2000 个人版,并安装 SP4 补丁. ...

  8. 01 Access数据库 测试连接

    附件:http://files.cnblogs.com/xe2011/AccesssConnectionState.rar using System.Data.OleDb; using System. ...

  9. docker-proxy 实现容器代理访问

    可实现多个容器web主机对外提供访问 运行代理容器 nginx-proxy docker run -d -p 80:80 -v /var/run/docker.sock:/tmp/docker.soc ...

  10. HDU2088JAVA

    Hot~~招聘——巴卡斯(杭州),亚信科技,壹晨仟阳(杭州) Box of Bricks Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: ...