浮动子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. 事物复制中大项目(Large Article)出问题如何快速修复

    事物日志中如果大的发布项目(Article)出问题了,并且影响了系统的使用,如何快速的解决? 一般的做法是重新用快照或者备份初始化,但是如果出问题的表非常大(上亿的记录,几十GB的数据),使用初始化是 ...

  2. tomcat多域名配置

    1.找到你的tomcat然后在conf文件中找到server.xml打开: <Server port="8005" shutdown="SHUTDOWN" ...

  3. Yii2中request的使用方法

    1.普通的get和pst请求 $request = Yii::$app->request; $get = $request->get(); // 等同于: $get = $_GET; $i ...

  4. PAT 1004. Counting Leaves (30)

    A family hierarchy is usually presented by a pedigree tree.  Your job is to count those family membe ...

  5. GridControl 无数据时显示信息

    图例: 主要代码如下: 说明:给GridView添加事件gv_CustomDrawEmptyForeground private void gv_CustomDrawEmptyForeground(o ...

  6. [TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS

    TypeScript outputs JavaScript, but what are you supposed to do with it? This lesson shows how to tak ...

  7. Load Balance Tomcat with Nginx and Store Sessions in Redis--reference

    An awkward title, but that’s exactly what we’re going to do. For some time, I was looking for a way ...

  8. bootstrap-datetimepicker 时间表箭头不能显示

    我使用的是bootstrap-datetimepicker+bootstrap v3,但这个插件使用的时候,并没有和V3相匹配,仍然调用的是bootstrap V2的图标,代码是: <i cla ...

  9. 在后台CS文件里面,隐藏和显示Repeater里面控件

    <asp:Repeater ID="Repeater1" runat="server"><ItemTemplate><asp:Pa ...

  10. AbstractMethodError using UriBuilder on JAX-RS

    问题描述:Eclipse调试JAX-RS服务没问题,但是在发布服务端时候抛出异常 java.lang.AbstractMethodError: javax.ws.rs.core.UriBuilder. ...