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

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

解决高度坍塌措施：

根据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. Android提权原理

    Android的内核就是Linux,所以Android获取root其实和Linux获取root权限是一回事儿. 你想在Linux下获取root权限的时候就是执行sudo或者su,接下来系统会提示你输入 ...

  2. 20155317王新玮《网络对抗》Exp2 后门原理与实践

    20155317王新玮<网络对抗>Exp2 后门原理与实践 一.实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划 ...

  3. NetBeans的(默认)快捷键

    NetBeans的(默认)快捷键 1.完成代码:ctrl+\ //任何地方按下此组合键,均会提示相应的参考字段:  2.错误提示:alt + enter //顾名思义,当系统报错时,按下此组合可以查看 ...

  4. WayOS计费对接（零点计费系统）详细教程

    零点计费系统开发也有两年了,一直都是自己和朋友在使用,今年开始有对外免费开发体验的想法,在此简单介绍一下wayos和零点计费的对接教程. 可到官网www.feidian8.com里面的首页点击查看零点 ...

  5. 浅谈我的UI设计之路

    时光匆匆,进入UI学习已经快两个月了,这段时间过得很充实,因为有压力才有收获. 还记的刚刚学习手绘的时候,对于这个行业只有一个初步的认识,知道自己喜欢,但是真正学习的时候才发现,我要学习的东西还有很多 ...

  6. Docker操作命令

    docker --直接输入 docker 命令来查看到 Docker 客户端的所有命令选项. docker [command] --help --深入的了解指定的 Docker 命令使用方法 dock ...

  7. HyperLedger Fabric 学习思路分享

    HyperLedger Fabric 学习思路分享 HyperLedger Fabric最初是由Digital Asset和IBM公司贡献的.由Linux基金会主办的一个超级账本项目,它是一个目前非常 ...

  8. Delphi中 弹出框的用法

    Delphi中的提示框有 Application.MessageBox  ShowMessage messagedlg 个人认为 相对来说 Application.MessageBox 更加灵活 也相 ...

  9. 12.17daily_scrum

    悬浮窗的优化设计工作已经展开,各界面的测试也在有条不紊的进行,大家都尽量做到了在发现了软件自身的一些问题和bug后,做到在第一时间及时恢复和修改,工作进度的安排也在预期之中,明日的任务发布如下: 具体 ...

  10. 使用git进行代码的推送

    首先是对于锐捷墙的问题,登陆github有时可以有时又连不上,网络又非常慢,所以用了十足的耐心才fork完了代码库.链接https://github.com/niconiconiconi/hellow ...