当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的解决的更多相关文章

  1. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  2. html+css学习笔记 3[浮动]

    inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie ...

  3. div不设置高度背景颜色或外边框不能显示的解决方法

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题. 大体结构<div class="oute ...

  4. 项目期复习总结2：Table， DIV+CSS，标签嵌套规则

    文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...

  5. div标签嵌套原则详解（转载）

    这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span ...

  6. 关于p标签不能嵌套div标签引发的标签嵌套问题总结

    问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...

  7. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  8. 前端 HTML body标签相关内容 常用标签 盒子标签 div

    盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...

  9. HTML中Div、span、label标签的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

随机推荐

  1. 【读书笔记《Android游戏编程之从零开始》】3.Android 游戏开发常用的系统控件（Button、Layout、ImageButton）

    3.1 Button Button这控件不用多说,就是一个按钮,主要是点击后进行相应事件的响应. 给组件添加ID属性:定义格式为 android:id="@+id/name",这里 ...

  2. web前端笔试题总结

    em和rem的区别: 浏览器的默认字体高度是16px,1em=16px:大小可以自己设置调整,并且默认集成父级容器中文本的大小. rem是CSS3中新增的属性,默认情况下是文本尺寸的大小,不同的是它集 ...

  3. 边工作边刷题：70天一遍leetcode: day 85-3

    Zigzag Iterator 要点: 实际不是zigzag而是纵向访问 这题可以扩展到k个list,也可以扩展到只给iterator而不给list.结构上没什么区别,iterator的hasNext ...

  4. hihocoder-1391&&北京网赛09 Countries(优先队列)

    题目链接: Countries 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 There are two antagonistic countries, country ...

  5. maven 多工程搭建演示

    maven出现后,很多公司会用maven来构建项目,单仅仅只是单项目单工程的 并没有使用多工程来构建,这样在以后,项目越来越大,业务越来越多以后,项目会难以维护,越发庞大,维护成本提高,团队士气也会下 ...

  6. AC日记——逃跑的拉尔夫 codevs 1026 （搜索）

    1026 逃跑的拉尔夫  时间限制: 1 s    空间限制: 128000 KB    题目等级 : 黄金 Gold 题解       题目描述 Description   年轻的拉尔夫开玩笑地从一 ...

  7. main方法的理解

    1),在执行一个类的时候,所找到的方法是mian(). 2)string args[]:输入的参数. public class StaticDemo08{ public static void mai ...

  8. 优化mysql主从下的slave延迟问题

    一般而言,slave相对master延迟较大,其根本原因就是slave上的复制线程没办法真正做到并发.简单说,在master上是并发模式(以InnoDB引擎为主)完成事务提交的,而在slave上,复制 ...

  9. 序列化在Netty中的使用

    Java序列化的缺点 1.无法跨语言 对于Java序列化后的字节数组,别的语言无法进行反序列化 2.序列化后的码流过大 3.序列化性能低 使用JDK自带的序列化进行对象的传输 被传输的,实现了序列化接 ...

  10. performSelector:withObject:afterDelay: 精要概览（持续更新）

    - (void)performSelector:(SEL)aSelector withObject:(id)anArgument afterDelay:(NSTimeInterval)delay; - ...