<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. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  2. MongoDB使用小结：一些常用操作分享

    本文整理了一年多以来我常用的MongoDB操作,涉及mongo-shell.pymongo,既有运维层面也有应用层面,内容有浅有深,这也就是我从零到熟练的历程. MongoDB的使用之前也分享过一篇, ...

  3. C#中(int)、int.Parse()、int.TryParse()和Convert.ToInt32()的区别

    转自:http://www.cnblogs.com/leolis/p/3968943.html 在编程过程中,数据转换是经常要用到的,C#中数据转换的方法很多,拿将目标对象转换为 整型(int)来讲, ...

  4. XmlUtils.java

    package com.vcredit.framework.utils; import java.io.Writer; import org.apache.commons.lang3.StringUt ...

  5. 掌握Thinkphp3.2.0----连贯操作

    其实在TP中,说起来语句中的各个关键词都被封装成了函数,将各个由关键词演变来的函数连起来就是所谓的连贯操作.只要注意各个函数直接参数传递的区别就可以了. 再者,不是所有的函数都可以进行连贯操作!!!比 ...

  6. opengl中对glOrtho()函数的理解

    glOrtho是创建一个正交平行的视景体. 一般用于物体不会因为离屏幕的远近而产生大小的变换的情况.比如,常用的工程中的制图等.需要比较精确的显示. 而作为它的对立情况, glFrustum则产生一个 ...

  7. 宿主机远程桌面连接vmware中的虚拟机

    参考了:http://jingyan.baidu.com/article/3052f5a1e8c56397f21f8674.html   感谢~ 宿主机安装了vmware,vmware中安装虚拟机,怎 ...

  8. 在Ubuntu上安装网易云音乐

    对于网易,我只服云音乐,业界良心,用过的人都知道.我最喜欢的就是歌曲的评论功能,还有朋友圈子.里面有很多好段子,还有很多的好故事,基本上,不是分手,就是回忆初恋,还有吐槽的.我认为音乐带给人的不仅是耳 ...

  9. C++ 支持两种索引的排行榜模板

    version 1: #ifndef RANK_TMPL_H_ #define RANK_TMPL_H_ #include <stdio.h> #include <stdint.h& ...

  10. 轻量级ORM-Fluentdata入门

    Fluent Data 入门 由 Primates 根据互联网资源整理FluentData 是微型 ORM(micro-ORM)家族的一名新成员,旨在比大型 ORM(full ORM)更加易用.Flu ...