一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图:

部分代码如下:


1 <style>
2   #div1{border:1px solid red;float:left;}
3   #div2,#div3{float:right;border:1px solid blue;}
4 </style>
5 
6 <div id="div1">
7   <div id="div2">two</div>
8   <div id="div3">one</div>
9 </div>

如果想要撑开父元素可以采用以下方法:

方法一:

父元素设置overflow以及zoom,样式如下:

1 <style>
2   #div1{border:1px solid red;overflow:hidden;zoom:1;}
3   #div2,#div3{float:right;border:1px solid blue;}
4 </style>

方法二:

父元素也是设置浮动效果,样式如下:

1 <style>
2   #div1{border:1px solid red;float:left;}
3   #div2,#div3{float:right;border:1px solid blue;}
4 </style>

此方法有个缺陷是,父元素的宽度需要设置。

方法三:

在添加一个子元素,并设置clear样式:

1 <div id="div1">
2   <div id="div2">two</div>
3   <div id="div3">one</div>
4   <div style="clear:both"></div>
5 </div>

此方法添加了一个div元素,有些情况下可能这个div会影响元素的遍历。

以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 Transitional 在FF IE6 IE7 IE8 下测试通过,其他浏览器没有测试。

子元素使用float 父元素撑开方法的更多相关文章

  1. 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  2. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  3. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  4. ie6下子元素撑大父元素

    今天遇到了一个问题.在给a元素定义hover并且增大尺寸时,IE6下该元素会把父元素撑大,而非IE浏览器则是表现为溢出效果不会撑大父元素(我想要的效果).解决IE6的这个问题是采用了一个定位+负边距的 ...

  5. 子Div使用Float后如何撑开父Div

    如果想要撑开父元素可以采用以下方法: 方法一: 父元素设置overflow以及zoom,样式如下: 1 <style> 2   #div1{border:1px solid red;ove ...

  6. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  7. CSS子元素margin-top对于父元素的影响

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <styl ...

  8. 【转】C# 子窗体如何调用父窗体的方法

    网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法       //FormFather:        //需要有一个公共的 ...

  9. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. HashMap实现缓存(二)

    package com.cache; import java.util.*; //Description: 管理缓存 //可扩展的功能:当chche到内存溢出时必须清除掉最早期的一些缓存对象,这就要求 ...

  2. Eclipse中Python开发环境搭建

    Eclipse中Python开发环境搭建  目 录  1.背景介绍 2.Python安装 3.插件PyDev安装 4.测试Demo演示 一.背景介绍 Eclipse是一款基于Java的可扩展开发平台. ...

  3. php 导出对象生成代码并执行var_export和eval

    var_export($obj,true) 导出一个合法的php代码,返回一个字符串 eval($str) 执行一个字符串代码 __set_state 当用var_export导出一个类时,自动调用, ...

  4. redis学习

    wget http://labfile.oss.aliyuncs.com/files0422/redis-2.8.9.tar.gz .tar.gz cd redis- make make instal ...

  5. Bash Shell 获取进程 PID

    转载地址:http://weyo.me/pages/techs/linux-get-pid/ 导读 Linux 的交互式 Shell 与 Shell 脚本存在一定的差异,主要是由于后者存在一个独立的运 ...

  6. es6新特性(一)

    关于es6,阮一峰的<ECMAScript 6入门> http://es6.ruanyifeng.com/写的非常详尽,可以经常看看,这里是对这本书进行一个缩略,可能有误,欢迎大家纠正.

  7. Orchard内置特性(以模块来说的)

    本文链接:http://www.cnblogs.com/souther/p/4539169.html 主目录 Orchard中有很多可以直接和多次使用的特性,这些东西在官方的Gallery中可以找到. ...

  8. FileSystemWatcher用法详解

    FileSystemWatcher控件主要功能: 监控指定文件或目录的文件的创建.删除.改动.重命名等活动.可以动态地定义需要监控的文件类型及文件属性改动的类型. 1.常用的几个基本属性: (1) P ...

  9. sql常用的星期方法

    sql常用的星期方法: SELECT convert(varchar(10),DATEADD(wk, DATEDIFF(wk,0,getdate()), 0),120) --本周开始周一SELECT ...

  10. HDU 3038 How Many Answers Are Wrong 并查集带权路径压缩

    思路跟 LA 6187 完全一样. 我是乍一看没反应过来这是个并查集,知道之后就好做了. d[i]代表节点 i 到根节点的距离,即每次的sum. #include <cstdio> #in ...