浮动子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. CMDB处理数据流程

    客户端代码执行流程: 服务器端接收并处理数据流程:

  2. hdoj 3072 Intelligence System【求scc&&缩点】【求连通所有scc的最小花费】

    Intelligence System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  3. DrawerLayout和toolbar的使用

    onPostCreate()是Activity完全启动后的调用:在完全启动后的回调设置toolbar 然后在使用 AppCompatActivity 时style要设置为何appCompat相关的样式 ...

  4. php获取机器网卡的物理（MAC）地址

    <?php /** 获取网卡的MAC地址原码:目前支持WIN/LINUX系统 获取机器网卡的物理(MAC)地址 **/ class GetMacAddr{ var $return_array = ...

  5. 关于list、set、map的几点总结

    用法: 1. 如果涉及到堆栈,队列等操作,应该考虑用List, 对于需要快速插入,删除元素,应该使用LinkedList, 如果需要快速随机访问元素,应该使用ArrayList.2. 如果程序在单线程 ...

  6. ASP.NET MVC- VIEW Creating Page Layouts with View Master Pages Part 4

    In this tutorial, you learn how to create a common page layout for multiple pages in your applicatio ...

  7. js_面向对象编程

    主要内容 值类型与引用类型的特征 深拷贝与浅拷贝 对象的动态特性 构造函数的执行过程 异常处理 dom操作(略) <!DOCTYPE html> <html> <head ...

  8. [互联网面试笔试汇总C/C++-7] 寻找两个链表的第一个交点-微策略

    题目:有两个链表,找出他们的第一个交点,要求每个链表只能遍历一次,可以对链表进行任何操作,空间O(1). 思路: 这个题目刚开始看觉得要遍历一次有点困难,但是仔细一想,人家告诉说可以对链表进行任何操作 ...

  9. [Javascript] Immutable opreators

    slice filter map ...spread concat Object.assign let items = [1,2,3]; //add let newItems = [...items, ...

  10. JavaEE SSH框架整合(三) struts2 异常、http错误状态码处理

    struts2的action可能出现訪问不到,或action报异常等情况,所以须要作一些处理,给用户一个友好的印象. 1. 异常处理  result声明在action中 <action name ...