如下所示，子元素 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. 单元测试JUnit4 Ctrl + Shift + T

    单元测试 public class Calculator { public int result = 0; public int add(int operandl, int operand2) { r ...

  2. DB2删除表分区

    近日,由于部门数据库读库空间过小,提出删除掉两个月之前日志表的分区(数据库分区是按时间月分区),记述如下: 上网搜索资料发现删除表分区大概分这么几步: 1.查询需要删除掉的分区: select t.D ...

  3. C语言system()函数：执行shell命令

    头文件:#include <stdlib.h> 定义函数:int system(const char * string); 函数说明:system()会调用fork()产生子进程, 由子进 ...

  4. bzoj 1098 [POI2007]办公楼biu——链表

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1098 求补图的连通块大小.与自己没有边的和自己在一个连通块里. 用链表把所有点串起来.先给自 ...

  5. rsync（五）工作机制

    当我们讨论rsync时,我们使用了一些特殊的术语来代表不同的进程以及它们在任务执行过程中所扮演的角色.人类为了更方便.更准确地交流,使用同一种语言是非常重要的:同样地,在特定的上下文环境中,使用固定的 ...

  6. Spark Streaming之四：Spark Streaming 与 Kafka 集成分析

    前言 Spark Streaming 诞生于2013年,成为Spark平台上流式处理的解决方案,同时也给大家提供除Storm 以外的另一个选择.这篇内容主要介绍Spark Streaming 数据接收 ...

  7. 在项目中添加全局的 pch 文件

    说明,本片博文仅仅是方便自己以后在添加 pch 文件的配置时候参照使用,担心一些配置的路径由于时间而遗忘. (1)建一个 pch 文件 注意下面要 在 Targets 后打上 对号 (2)对该文件进行 ...

  8. 第三篇：SpringBoot用JdbcTemplates访问Mysql

    本文介绍springboot通过jdbc访问关系型mysql,通过spring的JdbcTemplate去访问. 准备工作 jdk 1.8 maven 3.0 idea mysql 初始化mysql: ...

  9. Flutter实战视频-移动电商-13.首页_广告Banner组件制作

    13.首页_广告Banner组件制作 主要是做这个小广告条. 其实就是读取一个图片做一个widget放到这里 使用stlessW快速生成 定义一个变量存放图片的url地址: 这样我们的广告条就写完了 ...

  10. Flutter实战视频-移动电商-54.购物车_商品列表子项布局

    54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定 ...