<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. gitlab 创建SSH Keys 报500错

    gitlab 创建SSH Keys 报500错 看了一下日志 root@322323:/home/git/gitlab/log# cat production.log Errno::ENOMEM (C ...

  2. DevOps is dirty work - Dream in One-Click

    真是一晃就到年底,年初许的梦想实现了吗?这么残忍的问题还是不要知道答案了吧:) 这恍若隔世的大半年,不仅没有承接着上篇继续聊Continuous Delivery (CD),反而疑似荒废.然而,梦想还 ...

  3. Ubuntu ./configure 半途终止 导致没有生成makefile文件 解决方法

    在安装thrift的时候,解压包进入目录,执行命令: ./configure 之后,发现某些包没有安装,导致configure到一半的时候退出,接着make发现没有makefile文件.估计是我系统安 ...

  4. ThinkPHP 3.2.3 加减乘法验证码类

    ThinkPHP 3.2.3 自带的验证码类位于 /ThinkPHP/Library/Think/Verify.class.php,字体文件位于 /ThinkPHP/Library/Think/Ver ...

  5. 再谈java两种变量(基本类型和引用类型)(综合各路大神)

    基本类型: 基本类型自然不用说了,它的值就是一个数字,一个字符或一个布尔值. int  a:   a=250: //声明变量a的同时,系统给a分配了数据空间. 引用类型: 是一个对象类型,值是什么呢? ...

  6. 经典的javascript函数实例,css的. #区别

    先贴javascript经典例子代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. sql笔记-group by 统计功能

    --查询月销售量小于20的人员销售情况 SELECT C.Category, SUM(c.[Count]) AS CategorySum FROM test.dbo.Category c --WHER ...

  8. 99%的人都理解错了HTTP中GET与POST的区别

    GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...

  9. css 居中问题

    水平居中有text-align:center 和 margin:0 auto,前者是针对父元素进行设置而后者则是对子元素.margin:0 auto; 这里实现的前提是子元素没有float 浮动起来, ...

  10. ORM系列之二:EF(1)

    目录 1. EF是什么 2. 如何获取EF 3. EF有哪些主要模式 EF是什么 EF全称为Entity Framework,是微软推荐的一种数据库访问技术,属于重量级的ORM框架,功能非常强大,目前 ...