浮动子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. Uniform resource name

        A uniform resource identifier (URI) is a uniform resource locator(定位器,探测器) (URL), uniform resour ...

  2. 搭建PHP开发环境 apache+MySQL+PHP 安装phpMyAdmin模块

    该博文参考的资料来源于: http://wenku.baidu.com/view/0e4c569ddd3383c4bb4cd267.html http://www.cnblogs.com/pharen ...

  3. LeetCode153:Find Minimum in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  4. 闪回还原点（Flashback Restore Point）

    Flashback Restore Point(闪回还原点) 闪回还原点分两种,一种是Normal Restore Points(正常还原点),另一种是Guaranteed Restore Point ...

  5. LabVIEW设计模式系列——各种各样的状态机

  6. Apache CXF 3.0: CDI 1.1 Support as Alternative to Spring--reference

    With Apache CXF 3.0 just being released a couple of weeks ago, the project makes yet another importa ...

  7. Java基础知识强化之IO流笔记32：转换流之OutputStreamWriter的使用

    1. OutputStreamWriter的使用 OutputStreamWriter(OutputStream out):根据默认编码把字节流的数据转换为字符流 OutputStreamWriter ...

  8. ajax大数据排队导出+进度条

    描述 :我们现在有很多数据,分表存放,现在需要有精度条的导出.最后面有完整源码. 效果图:

  9. Spring MVC 中的 forward 和 redirect

    Spring MVC 中,我们在返回逻辑视图时,框架会通过 viewResolver 来解析得到具体的 View,然后向浏览器渲染.假设逻辑视图名为 hello,通过配置,我们配置某个 ViewRes ...

  10. 网页版 treeview使用中遇到的问题

    <div class="ScrollBar" id="ItemsTree"></div> var cla = $("#Item ...