如下所示，子元素 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. codeforces 466A. Cheap Travel 解题报告

    题目链接:http://codeforces.com/problemset/problem/466/A 题目意思:一个 ride 需要 a 卢布,m 个 ride 需要 b 卢布,这两种方案都可以无限 ...

  2. powershell 扩展 (PSCX) 安装指南

    在玩ansible的过程中,使用win_unzip模块时powershell支持不了,需要安装PSCX对powershell进行扩展,随手记录下安装过程. 从官网下载的Pscx是一个zip压缩文件,解 ...

  3. QQ登陆功能的实现2

    QQ登陆功能的实现2 由于看到园子里有朋友说需要讲解和剖析实现的步骤,前面的QQ登陆实现只有代码,所以这篇补上 1.  分析 1). 当运行QQ.exe后会出现qq登陆界面的窗体 2). 我们用spy ...

  4. 微信小程序网络请求wx.request请求

    最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 百牛信 ...

  5. RTP Payload Format for Transport of MPEG-4 Elementary Streams over http

    1．SDP (1)Http Request GET /getSdpForUrl?HttpUrl=nphMpeg4/g726-640x480 HTTP/1.0/r/n Host: 58.63.71.90 ...

  6. POJ1163(基础线性DP)

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 42547   Accepted: 25721 De ...

  7. Python_XML的三种解析方法

    什么是XML? XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. XML是一套定义语义标记的规则,这些标记将文档分成许多部件并对这 ...

  8. jq之鼠标事件

    以防自己忘记,最重要的是hover效果的 鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.   (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发 ...

  9. CodeForces 1110H. Modest Substrings

    题目简述:给定$1 \leq l \leq r \leq 10^{800}$,求一个长度为$n \leq 2000$的数字串$s$,其含有最多的[好]子串.一个串$s$是[好]的,如果将其看做数字时无 ...

  10. dom4j的解析实例

    book.xml数据如下: <books> <book> <author>Thomas</author> <title>Java从入门到放弃 ...