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推荐方法,兼容性较 ...
随机推荐
- DGA域名——可以每天只生成一个域名，因此最多存在365个 DGA域名；
Mirai变种中的DGA 分享到: 发布时间:2016-12-12 16:02:57 作者:360网络安全研究院 投稿方式:发送邮件至linwei#360.cn,或登陆网页版在线投稿 那个导致美国断网 ...
- 【转载】 C++中回车换行（\n\r）和换行(\r)的区别
原文:http://blog.csdn.net/xiaofei2010/article/details/8458605 windows下的点一下回车,效果是:回车换行,就是\r\n unix系统下的回 ...
- 2016.4.23浙江省赛(zoj3936 zoj3938 zoj3940 zoj3944 zoj3946 zoj3947 )
A Apples and Ideas Time Limit: 2 Seconds Memory Limit: 65536 KB "If you have an apple ...
- java第五天之---方法与数组
案例一:从键盘输入两个数据,比较大小 import java.util.Scanner;class FunctionTest { public static void main(String[] ar ...
- Can't locate Log/Dispatch.pm in @INC /Makefile out-of-date with respect to Makefile.PL
mha check的时候报错问题解决: # masterha_check_ssh --conf=/data/mha/app1.cnf Can't locate Log/Dispatch.pm in ...
- [HAOI 2012] 容易题
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2751 [算法] 考虑k = 0的情况 , 根据乘法原理 : Ans = (n * ( ...
- codevs1068乌龟棋
codevs1068乌龟棋 1068 乌龟棋 2010年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamon 题目描述 Descrip ...
- 【重磅推荐】嵌入式Linux经典书单(部分含视频)
一直都有人问我要书单,在网上搜索大半天,没找到合适的,他们写的太不负责了,遂决定自己整理. 本书单综合了豆瓣知乎热评,尤其参考了一线开发者韦东山学员群的小伙伴们的意见, 再结合本人多年答疑经验整理而成 ...
- Ubuntu 安装Guake
一款代替终端的软件, 只需按F12就可以调出终端, 再按就消失, 附上Github链接. https://github.com/Guake/guake 一开始没安装上去, 后来成功, 现在用着还不错, ...
- ARM之工作模式
前言 以下内容是个人学习之后的感悟,转载请注明出处~ ARM工作模式 ARM工作模式根据功能不同,可分为7类: User Mode:用户模式.操作系统的Task一般以这种模式执行 ...