<div>

    <div style="float:left;">left</div>

    <div style="float:right;">right</div>

</div>

如上代码所示，父div的高度并不会随着两个子div的增高而增高。解决办法：

给父div加一个 overflow:hidden 属性即可。如下：

<div style="overflow:hidden;">

    <div style="float:left;">left</div>

    <div style="float:right;">right</div>

</div>

友情支持：http://www.tea119.com

css中子元素浮动，无法自动撑开父元素的解决办法的更多相关文章

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

    方法一:对父级设置固定高度 假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果. 此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度.此方法 ...

  2. HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案

    费话不多说,直接上问题: 1.开始时,页面只有两个DIV的嵌套(见图) 运行结果是: 现在看运行的是正常的,但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样 ...

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

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

  4. 子元素margin-top为何会影响父元素？

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  5. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  6. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  7. 给HTML页面指定元素添加属性，添加父元素

    给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img   此处用到querySelectorA ...

  8. 子元素设置margin-top后，父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. Atitit.判断元素是否显示隐藏在父元素 overflow

    Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop  指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素  $(next) ...

随机推荐

  1. html 之input标签height设置问题

    今天针对这个问题纠结了很久 <input type="button" value="xx" style="height:99px;" ...

  2. 移动端/H5关于cursor:pointer导致的问题

    cursor属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 不过,这个属性用在PC端没有任何问题 ...

  3. Failed to execute goal org.apache.maven.plugins:maven-antrun-plugin:1.7:run (dist) on project hadoop-kms: An Ant BuildException has occured

    编译cdh版hadoop2.5.0出现的问题 系统: CentOs66 64位 JDK:1.7 Maven: 3.0.5 Protobuf: libprotoc 2.5.0 编译命令: mvn pac ...

  4. windows快捷键集锦

    输入命令:netstat -ano,列出所有端口的情况.在列表中我们观察被占用的端口,比如是8090,首先找到它. 查看被占用端口对应的PID,输入命令:netstat -aon|findstr &q ...

  5. bzoj2243: [SDOI2011]染色--线段树+树链剖分

    此题代码量较大..但是打起来很爽 原本不用lca做一直wa不知道为什么.. 后来改lca重打了一遍= =结果一遍就AC了orz 题目比较裸,也挺容易打,主要是因为思路可以比较清晰 另:加读入优化比没加 ...

  6. 第一章-第三题（目前流行的源程序版本管理软件和项目管理软件优缺点）--By梁旭晖

    引用自:http://www.cnblogs.com/WJ1234/p/5285595.htmlhttp://blog.163.com/yuyang_tech/blog/static/21605008 ...

  7. html基本选择符的使用

    一.选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用! 二.研究 普通选择符: 1.类型选择符:它可以选择同一个类型的元素! 例如:h1,h2 {              color: ...

  8. HTML基础篇之表格的运用

    <html> <head> <title></title> </head> <body> <table border=”1 ...

  9. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

  10. sql表别名

    表名.列明后面接as xx,xx就是表/列的别名,as可省略 别名通常有两个作用 as可省略,as可省略