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

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

解决高度坍塌措施：

根据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. excel的宏与VBA实践——建表语句

    一.建表语句 不带分区版本:V1.0: Sub createTableDDL() '自动创建建表语句 '定义换行和TAB Ln = ) + ) TB = ) '定义脚本目录 Dim dir AS St ...

  2. 20155311 Exp3 免杀原理与实践

    20155311 Exp3 免杀原理与实践 •免杀 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中需要使用到的技术. [基础问题回答] (1)杀软是如何检测出恶意代码的? 1.通过特征 ...

  3. C++ 对引用的深入理解

    观看了唐老师讲解的一节<第5课 - 引用的本质分析>感觉非常不错,有深度不废话,我喜欢--- 再此总结下,并且奉上视频下载地址--- 360网盘下载地址: https://yunpan.c ...

  4. CF 24 D. Broken robot

    D. Broken robot 链接. 题意: 一个方格,从(x,y)出发,等价的概率向下,向左,向右,不动.如果在左右边缘上,那么等价的概率不动,向右/左,向下.走到最后一行即结束.求期望结束的步数 ...

  5. centos 6.5 搭建开源堡垒机 Teleport 遇到的问题解决

    几款开源的堡垒机 下面进行 teleport 的安装: https://docs.tp4a.com/install/#11 异常1:libc.so.6: version `GLIBC_2.14' no ...

  6. [BZOJ4722]由乃[鸽巢原理+bitset+倍增]

    题意 给定长为 \(n\) 序列 \(a\) ,要求支持两种操作: \(1.\) 询问在一个区间 \([l,r]\) 中,是否能够选出两个交集为空的集合 $ \rm X ,Y$, 使得 \(\sum_ ...

  7. 一步一步来熟悉Akka.Net(一）

    一步一步来熟悉Akka.Net(一) 标签(空格分隔): .netcore 分布式 一.不利flag   好久没写过文章了,翻开前几年写的博客,看到有两个目标"代码生成器"和&qu ...

  8. 【ORACLE】oracle数据库用户密码复杂度配置

    -- 设置密码复杂度 SQL> @ /u01/app/oracle/product/11.2.0/db_1/rdbms/admin/utlpwdmg.sql -- 测试 SQL> alte ...

  9. install opencv 2.4.10 with issue :"nvcc fatal : Unsupported gpu architecture 'compute_11'"

    issue: nvcc fatal   : Unsupported gpu architecture 'compute_11'CMake Error at cuda_compile_generated ...

  10. Mysql_临时表

    CREATE TEMPORARY TABLE test_info ( test_name ) NOT NULL, test_totail ,) NOT NULL DEFAULT 0.00, test_ ...