Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决
2024-08-22 16:18:29
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触DIV+CSS的朋友的一个问题。
先来看看这个问题的实际效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head> <body>
<div style="background-color:red;width:100px;">div 1
<div style="background-color:green;float:left;height:300px;width:40px;">div float</div>
</div>
</body>
</html>
看图
这里本来DIV1是套在了DIV2的外面的,如果是使用表格做的话,那么DIV1肯定被撑开了,效果应该是如下所示
那如何解决这个浮动了之后无法把容器撑开的局面呢?解决的方法这里介绍2仲。
第一种:在浮动结束的容器后面加上这段代码
<div style=”clear:both;”></div>
意思是清除浮动。
第二种:在外层DIV,也就是这里的DIV1的CSS里面加入以下CSS代码
overflow: auto;
这2种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法,要养成一个习惯,在浮动应用完后消除浮动,这样后面的DIV就不会继承这个浮动(就像在编程的时候,在打开数据库,操作完后,要养成个习惯在后面把数据库关闭)。也就是说浮动这个东西会被继承,除非消除这个浮动,才不会让后面接着的DIV受到继承。其实不仅是DIV,其他的像P等其他的容器都会有继承的效应,大家要养成一个习惯记得要消除浮动。
完整案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head> <body>
<div style="background-color:red;width:100px;overflow:auto;">div 1
<div style="background-color:green;float:left;height:300px;width:40px;">div float</div>
</div>
</body>
</html>
最新文章
- XML.03-DOM和SAX解析
- div基础
- db2代理和优化
- Linux下的ntp时钟同步问题
- GeoServer地图开发解决方案
- php 正则校验是否是域名
- NandFlash
- 深入理解java虚拟机系列(一):java内存区域与内存溢出异常
- Myeclipse2014中,新建部署Maven项目
- 【caffe-windows】 caffe-master 之 训练自己数据集(图片转换成lmdb or leveldb)
- 《Google软件测试之道》【PDF】下载
- Django使用模板后无法找到静态资源文件
- Jmeter 多用户同时登陆
- 网站分析平台:是选择百度统计,还是 Google Analytics 呢?
- win7 64位系统下安装autoitlibrary库遇到问题解决
- POJ 1179 - Polygon - [区间DP]
- C# FileStream MemoryStream BufferedStream StreamReader StreamWriter
- Qt模态与非模态
- Android开发新手问题
- bzoj 1051 强连通分量