如下所示，子元素 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. POJ2154 Color【 polya定理+欧拉函数优化】（三个例题）

    由于这是第一天去实现polya题,所以由易到难,先来个铺垫题(假设读者是看过课件的,不然可能会对有些“显然”的地方会看不懂): 一:POJ1286 Necklace of Beads :有三种颜色,问 ...

  2. BZOJ_4026_dC Loves Number Theory _主席树+欧拉函数

    BZOJ_4026_dC Loves Number Theory _主席树+欧拉函数 Description  dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯 竭 ...

  3. python optparse模块的简单用法

    # coding = utf-8 from optparse import OptionParser from optparse import OptionGroup usage = 'Usage: ...

  4. DAG上的DP

    引例:NYOJ16 矩形嵌套 时间限制:3000 ms  |           内存限制:65535 KB 难度:4   描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可 ...

  5. CS231n 2016 通关 第五章 Training NN Part1

    在上一次总结中,总结了NN的基本结构. 接下来的几次课,对一些具体细节进行讲解. 比如激活函数.参数初始化.参数更新等等. ====================================== ...

  6. 关于window.event.srcElement 和 window.event.target(触发事件的对象)

    转自:https://www.cnblogs.com/zhilingege/p/7423817.html window.event.srcElement   是指触发事件的对象 <script ...

  7. android实例3：拖动条

    个人网站http://www.ravedonut.com/ 拖动条改变图片的透明度 xml <LinearLayout xmlns:android="http://schemas.an ...

  8. HDFS源码分析四-HDFS Client

    4. HDFS Client ( 未完待续 ) 目录: 4.1 认识 DFSClient ( 未完待续 ) 4.2 输入流 ( 未完待续 ) 4.3 输出流 ( 未完待续 ) 4.4 Distribu ...

  9. 【eclipse插件开发实战】Eclipse插件开发1——eclipse内核结构、扩展点机制

    Eclipse插件开发实战1--eclipse内核结构.扩展点机制 一.前言 本系列总体介绍eclipse插件开发基本理论.插件项目结构及开发步骤,最后再给出两个插件开发实例. 总体安排结构如下: 1 ...

  10. Several ports (8005, 8080, 8009) required

    Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. The ...