如下所示，子元素 div2 本身具有高度和宽度，但由于其具有float:left；属性后。其父元素 div1 不具有高度。

<html>
    <head>
    </head>
    <body>
        <div id="div1">
            <div id="div2" style="width:100px;height:20px;background:red;float:left;"></div>
        </div>
    </body>
</html>

当然我们可以直接给 div1 设置固定高度来解决。另外一种解决办法是给父元素 div1 设置 overflow:hidden 属性。如下所示：

<html>
    <head>
    </head>
    <body>
        <div style="overflow:hidden;">
            <div style="width:100px;height:20px;background:red;float:left;"></div>
        </div>
    </body>
</html>

CSS浮动float父div没有高度的问题的更多相关文章

  1. 解决css的float父div没有高度

    在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...

  2. CSS: 解决Div float后，父Div无法高度自适应的问题

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  3. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  4. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  5. css浮动(float)全方位案例解析

    前言 浮动最早的使用是出自<img src="#" align="right" />,用于文本环绕图片的排版处理.当然也是一种常用的布局方式. fl ...

  6. 验分享：CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

  7. 关于自适应屏幕，设置子元素浮动，父div不能包裹子div，子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  8. css浮动(float)详解

    一.什么是浮动? 浮动,顾名思义,就是漂浮的意思.指的是一个元素脱离文档流,悬浮在父元素之上的现象. 二.如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动. rig ...

  9. css浮动中避免包含元素高度为0的4种解决方法

    问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both     (W3C推荐方法,兼容性较 ...

随机推荐

  1. struts2中<s:if>标签的使用

    转载:http://blog.sina.com.cn/s/blog_5f9938640100v2kr.html A:<s:if>判断字符串的问题: 1.判断单个字符:<s:if te ...

  2. swoole异步redis安装前置条件和流程

    ---恢复内容开始--- 1.redis服务 确认redis在服务器中已经安装了 2.hiredis库 第二步安装hiredis 下载位置 2.1获取 安装包https://github.com/re ...

  3. hpuoj 1193: Interval

    Interval [STL.双指针.二分] 题目链接 http://acm.hpu.edu.cn/problem.php?id=1193 或者 题目链接 http://acm.nyist.net/Ju ...

  4. python中的不可变类型和可变类型

    在python中整形,字符串,元组是不可变类型,而列表和字典都是可变类型. 对于不可变类型进行重新赋值,相当于是用以前的变量名重新指向了新的地址,这个地址中存的变量值就是重新的赋值 通过python中 ...

  5. AndroidStudio自动弹出Documentation

    AndroidStudio自动弹出Documentation窗口 例如,在布局文件中添加 Button 标签 敲完 <Butotn 回车后就自动出现 Documentation窗口 那如何关闭自 ...

  6. nagios对windows流量的检测

    windows下用于和 nagios 整合监控的方式主要有三种:nsclient++ .nrpe_nt.SNMP.三者各自的特点主要如下: 1.nsclient++比较成熟稳定,文档也丰富,内置很多了 ...

  7. 为什么stc15的单片机，运行了几秒后就蹦了

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/53534465 还是那个led显示屏的项目...... stc15的单片机 运行了几 ...

  8. PDF上添加水印

    1.整合jar: itext-asian-5.2.0.jar,itextpdf-5.5.10.jar,iTextAsianCmaps.jar 下载:itext的整合jar包 2.使用方法: publi ...

  9. error:对‘vtable for new_sequence’未定义的引用 对‘typeinfo for num_sequence’未定义的引用

    在设计父类子类继承关系中,经常会出现此类问题. 报错原因:父类中的虚函数只有声明,没有定义. 解决方案 : 1. 定义相关的虚函数的实现. 2. 不实现了,直接搞成纯虚函数留给后代实现. virtua ...

  10. ElasticSearch基础之查询功能

    [01]查询类型: [02]基本查询和组合查询是参与打分的 1.创建映射: 注意事项:基于上面映射的创建: "type": "keyword" # 如果某个字段 ...