在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

解决高度坍塌措施：

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
　　1.父元素的垂直外边距不会和子元素重叠
　　2.开启BFC的元素不会被浮动元素所覆盖
　　3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC
　　1.设置元素浮动(不推荐)
　　　　- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
　　2.设置元素绝对定位(不推荐)
　　3.设置元素为inline-block(不推荐)
　　- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
　　4.将元素的overflow设置为一个非visible的值（aotu hidden）
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
overflow: hidden;

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可。

zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持。

高度坍塌的情况：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            .box1{

                /*为box1设置一个边框*/

                border: 10px red solid;

            }

            .box2{

                width: 100px;

                height: 100px;

                background-color: blue;

                float: left;

            }

            .box3{

                 height: 100px;

                 background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div class="box2"></div>

        </div>

        <div class="box3"></div>

    </body>

</html>

高度坍塌的效果：

通过zoom和overflow解决问题：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            .box1{

                border: 10px red solid;

                zoom:1;

                overflow: hidden;

            }

            .box2{

                width: 100px;

                height: 100px;

                background-color: blue;

                float: left;

            }

            .box3{

                 height: 100px;

                 background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div class="box2"></div>

        </div>

        <div class="box3"></div>

    </body>

</html>

看下效果：

问题解决

github上传了代码：

https://github.com/soyoungboy/htmlCssStudy

见lesson22和lesson,在浏览器里面运行下看看

前端学习 -- Css -- 高度坍塌问题的产生以及解决的更多相关文章

  1. CSS高度坍塌问题的原因以及解决办法

    原因: 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高.但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. 浅谈CSS高度坍塌

    高度坍塌情况: 当父元素没有设置高度,且子元素块都向左(右)浮动起来,那么父元素就会出现坍塌的现象. 解决办法: 在父元素包含块中加一个div: 优点:兼容性强,适合初学者. 缺点:不利于优化. 方法 ...

  4. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. 前端学习——css实用技术

    一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...

  6. Web前端学习——CSS

    一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...

  7. 前端学习 -- Css -- 浮动

    块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...

  8. 前端学习 -- Css -- 盒子模式

    框模型: CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里. 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.我们只需要将相应的盒子摆放到网页 ...

  9. 前端学习 -- Css -- 行间距

    在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线 ...

随机推荐

  1. 20155235 《网络攻防》 实验五 MSF基础应用

    20155235 <网络攻防> 实验五 MSF基础应用 实验内容 一个主动攻击实践,如ms08_067; (1分) 一个针对浏览器的攻击,如ms11_050:(1分) 一个针对客户端的攻击 ...

  2. 2015531 网络攻防 Exp1 PC平台逆向破解(5)M

    2015531 网络攻防 Exp1 PC平台逆向破解(5)M 实践目标 本次实践的对象是linux的可执行文件 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串 ...

  3. vue-cli，build 后，报错的解决办法

    报错如下图: 或: 解决办法:config / index.js 中,找到 build { assetsPublicPath: '/' },将其设置为:assetsPublicPath: './ ' ...

  4. scala学习——（1）scala基础（上）

    scala> val x = 1 x: Int = 1 一.值与变量 值(val):赋值后不可变 val值名称:类型 = XXX 变量(var):赋值后可以改变  var变量名称:类型 = XX ...

  5. 问题解决:IDEA右键选择new新文件的时候没有JSP文件选项解决

    参考: https://blog.csdn.net/tomorrow_fine/article/details/74090308 用上面的方法就可以解决了, 但是如果把web目录设置成了额外的,那id ...

  6. VMware Tools安装和卸载

    1.卸载 a.查找 vmware-uninstall-tools.pl 路径:sudo find / -name 'vmware-uninstall-tools.pl' b.切换到 vmware-un ...

  7. 第十九次ScrumMeeting博客

    第十九次ScrumMeeting博客 本次会议于12月9日(六)22时整在3公寓725房间召开,持续20分钟. 与会人员:刘畅.辛德泰.张安澜.赵奕.方科栋. 1. 每个人的工作(有Issue的内容和 ...

  8. PAT甲题题解-1091. Acute Stroke (30)-BFS

    题意:给定三维数组,0表示正常,1表示有肿瘤块,肿瘤块的区域>=t才算是肿瘤,求所有肿瘤块的体积和 这道题一开始就想到了dfs或者bfs,但当时看数据量挺大的,以为会导致栈溢出,所以并没有立刻写 ...

  9. 《Linux内核分析》第三周

    [李行之原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...

  10. 第二个spring冲刺第9天

    其中一个队员在检查程序的BUG途中发现了几个重要的BUG比如答案乱码.程序闪退,弹出黑幕.于是我们决定先把这些问题解决再继续开发其他功能