CSS浮动float父div没有高度的问题
如下所示，子元素 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没有高度的问题的更多相关文章
- 解决css的float父div没有高度
在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...
- CSS: 解决Div float后，父Div无法高度自适应的问题
在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- css浮动(float)全方位案例解析
前言 浮动最早的使用是出自<img src="#" align="right" />,用于文本环绕图片的排版处理.当然也是一种常用的布局方式. fl ...
- 验分享：CSS浮动(float,clear)通俗讲解
经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...
- 关于自适应屏幕，设置子元素浮动，父div不能包裹子div，子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
- css浮动(float)详解
一.什么是浮动? 浮动,顾名思义,就是漂浮的意思.指的是一个元素脱离文档流,悬浮在父元素之上的现象. 二.如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动. rig ...
- css浮动中避免包含元素高度为0的4种解决方法
问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both (W3C推荐方法,兼容性较 ...
随机推荐
- 用 Java 抓取优酷、土豆等视频
1. [代码][JavaScript]代码 import org.jsoup.Jsoup;import org.jsoup.nodes.Document;import org.jsoup.nodes ...
- 阿里云数据库产品HybridDB简介——OLAP数据库，支持行列混合存储，基于数据库Greenplum的开源版本，并且吸收PostgreSQL精髓
为什么会有HybridDB的诞生?它经历了怎样的研发历程?它的应用场景和情况是怎样的?带着这些问题,InfoQ对阿里云的数据库专家兼Postgres中国社区/中国用户会主席萧少聪先生进行了采访,以下文 ...
- smali语法积累记录
1.constructor 我们知道运行一个类的时候会先调用static方法中的内容,比如: static { System.loadLibrary("qihooTest"); } ...
- [YNOI 2016] 掉进兔子洞
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4939 [算法] 不难发现 , ansi = (r1 - l1 + 1) + (r2 ...
- css font-family（字体样式）
之前因为用的很少,所以没注意,最近做APP混合开发, 给字体一个样式 font-family:" 微软雅黑": 发现在有的手机上有效,但是在有的手机上是无效的, 解决方法: ...
- IO多路复用模型之epoll实现机制
设想一下如下场景:有100万个客户端同时与一个服务器进程保持着TCP连接.而每一时刻,通常只有几百上千个TCP连接是活跃的(事实上大部分场景都是这种情况).如何实现这样的高并发? 在select/po ...
- bzoj 2238 Mst——树链剖分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2238 一条非树边可以对一条链的树边产生影响.注意是边,所以把边下放到点上,只要跳 top 时 ...
- 洛谷 1541 乌龟棋——dp
题目:https://www.luogu.org/problemnew/show/P1541 以用了几张牌为阶段.注意知道了用了4种牌各几张后,当前位置就是确定的,所以不用记录什么的. #includ ...
- Oauth2的遇坑一点提示（Spring Security Oauth2 / Cloud)
1)使用@EnableOAuth2Sso的网页客户端,登录是成功的可是总是像没成功一样. 提示错误:没有 症结:context-path没设置,或者设置为/(ROOT) 参考资料:https://sp ...
- Flutter实战视频-移动电商-36.FlutterToast插件使用
36.FlutterToast插件使用 https://github.com/PonnamKarthik/FlutterToast fluttertoast: ^ category_page.dart ...