<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. 搭建centos测试环境：window安装xshell,WinSCP 。 centos安装jdk tomcat

    通过ssh实现远程访问linux系统: 由于xshell 连接centos,需要centos开启ssh服务.所以先启动SSH服务,没有ssh需要先安装. 1 . 查看SSH是否安装命令:rpm -qa ...

  2. cocos2d-x初步了解

    1.渲染 2.帧率(FPS) 超过75一般就不容易察觉到有明显的流畅度提升 >50 非常好! 30~40  一般, 20~30  及格,有点勉强. 3.渲染驱动游戏 事件驱动游戏 4.cocos ...

  3. 爬虫， 获取登录者的外网IP

    笔者学习了一下用爬虫, 获取登录者的外网IP. 首先导入Jsoup的jar包 public class RetrivePage { private static String url="ht ...

  4. cookie小析

    cookie用于存储数据,当用户访问了某个网站(网页)时,我们就可以通过cookie来向访问者电脑上存储数据1.不同的浏览器存放的cookie位置不同,也不能通用2.cookie的存储是以域名的形式进 ...

  5. javascript学习之带滚动条的图片

    之前找了好久没有找到,就自已动手写了一个: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  6. 最难面试的IT公司之ThoughtWorks代码挑战——FizzBuzzWhizz游戏

    最近互联网招聘平台拉勾网在五一期间推出个“最难面试的IT公司”代码挑战活动,评选出了5个最难面试的IT公司,即:ThoughtWorks.Google.Unisys.Rackspace.Cypress ...

  7. linux nginx 启动脚本

    linux nginx 启动脚本 [root@webtest76 ~]# vi /etc/init.d/nginx #!/bin/bash # nginx Startup script for the ...

  8. maven settings.xml 阿里云

    <?xml version="1.0" encoding="UTF-8"?> <!--Licensed to the Apache Softw ...

  9. 源码网站（msdn.itellyou.cn） good

    verysource 100万源码http://www.verysource.com/category/delphi-vcl/ MSDN DOWNLOADhttp://msdn.itellyou.cn ...

  10. jquery 操作大全

    1添加属性 $("#mydiv").attr("pro1","this is val"); $('.img1').attr('src', ' ...