Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决
当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>
Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决的更多相关文章
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- html+css学习笔记 3[浮动]
inline-block/float(浮动) 回顾:inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie ...
- div不设置高度背景颜色或外边框不能显示的解决方法
在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题. 大体结构<div class="oute ...
- 项目期复习总结2：Table， DIV+CSS，标签嵌套规则
文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...
- div标签嵌套原则详解（转载）
这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span ...
- 关于p标签不能嵌套div标签引发的标签嵌套问题总结
问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- 前端 HTML body标签相关内容 常用标签 盒子标签 div
盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...
- HTML中Div、span、label标签的区别
div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...
随机推荐
- bzoj-3288 3288: Mato矩阵(数论)
题目链接: 3288: Mato矩阵 Time Limit: 10 Sec Memory Limit: 128 MB Description Mato同学最近正在研究一种矩阵,这种矩阵有n行n列第i ...
- UESTC 424 AreYouBusy --混合背包
混合三种背包问题. 定义:dp[i][k]表示体积为k的时候,在前i堆里拿到的最大价值. 第一类,至少选一项,dp初值全赋为负无穷,这样才能保证不会出现都不选的情况.dp[i][k] = max(dp ...
- ofbiz的部署及安装问题解决办法
ofbiz是apache下的顶级开源项目之一,非常强大说下正常流程及解决办法. 开发环境:本人开发环境是win7系统 准备: 1.如果使用的是git,从https://github.com/apach ...
- Jenkins学习八：Jenkins语言本地化
在Jenkins中,英语一大片,不懂英语的看着头疼.非常高兴的是,Jenkins作为一个主流流行的持续构建工具,提供了一个本地化语言的配置界面. 你可以找到它,在Jenkins每页的左下角.如下图: ...
- 如何避免测试人员提交重复的Bug
我们在软件测试过程中,由于不同人员测试同一个项目,所以往往会出现Bug重复提交情况,导致对整个项目和人员产生影响: 浪费测试人员时间和精力,从而影响测试进度 浪费开发人员重复看Bug时间 若开发人员由 ...
- java 19 -13 FIle类的一些方法2
package zl_file; import java.io.File; import java.io.IOException; import java.text.SimpleDateFormat; ...
- Beaufort密码
博福特密码,是一种类似于维吉尼亚密码的替代密码,由弗朗西斯·蒲福(Francis Beaufort)发明.它最知名的应用是M-209密码机.博福特密码属于对等加密,即加密演算法与解密演算法相同 博福特 ...
- HTML5和css3的总结三
继续总结H5的新东西 1>序列化与反序列化 序列化:其实就是一个json->string的过程 JSON.stringify(json); 反序列化:string->json的过程( ...
- String类常用方法。
一,字符数组与字符串. 一个字符串可以变成一个字符数组,同样,一个字符数组可以变成一个字符串. 在String类中提供了以下操作方法. 1)将字符串变成字符数组:public char[] toCha ...
- fireworks将图片变为透明色
如果是新建的图片,只要把画布背景设置成透明,图片完成后保存为GIF格式即可: 如果是已经存在的图片,用Fireworks将图片打开,然后按Ctrl+Shift+X,在弹出界面中格式选择为GIF.在右边 ...