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

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

解决高度坍塌措施：

根据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. Verilog使用相对路径时应注意的问题

    在Quartus编译环境下,使用include, fopen等文件操作指令时,会涉及到文件路径问题. 以 E:\quartus_project\sd_card_controller\rtl\sd_wb ...

  2. Exp2 MAL_后门原理与实践 20155214

    目录 Exp2 MAL_后门原理与实践 实验内容 通过nc反向连接创建后门 meterpreter应用 主要思路 知识点 启发 Exp2 MAL_后门原理与实践 本次实验操使用nc实现win,mac, ...

  3. 20155227《网络对抗》Exp4 恶意代码分析

    20155227<网络对抗>Exp4 恶意代码分析 实践目标 1.是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分 ...

  4. Voronoi图与Delaunay三角剖分

    详情请见[ZJOI2018]保镖 题解随笔 - 99 文章 - 0 评论 - 112

  5. 4556: [Tjoi2016&Heoi2016]字符串

    4556: [Tjoi2016&Heoi2016]字符串 链接 分析: 首先可以二分这个长度.此时需要判断是否存在一个以b结尾的前缀,满足与[c,d]的lcp大于等于mid. 如果我们把串翻转 ...

  6. Security3: 架构和权限

    架构(Schema)是数据库对象(比如,Table,View,存储过程等)的容器,授予用户对Schema访问的权限,就是授予用户对Schema下所有object的访问权限. 一,架构(Schema)是 ...

  7. jQuery .attr() vs. .prop()

    Property vs. Attribute 在开始正式比较prop()和attr()两个jQuery方法之前,我们有必要先弄清一下Property和Attribute两个单词的意思.在中文里面,它们 ...

  8. vuex实践之路——笔记本应用（三）

    Actions Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 act ...

  9. NodeMCU学习(一) : 开始之前的准备

    安装Aduino开发环境 在官网中下载Arduino开发环境,或者在网盘中下载: 网盘地址: https://pan.baidu.com/s/1OjMhYgKOYW69YC2dEwFgyw: 提取码: ...

  10. Ubuntu16.04+Java8+Mysql5.7+Tomcat8.5服务器环境配置

    本文章使用环境: Ubuntu16.04 Java8 Mysql5.7 Tomcat8.5 Ubuntu 版本16.04, 本文采用SSH远程登录主机 工具:Xshell 默认使用root用户登录 ( ...