问题描述：

在文档流中，父元素默认被子元素撑开（父多高子多高），一旦子浮动，脱离文档流，父无撑起元素便塌陷，父下的所有元素会上移。

（不推荐）可以将父高度写死避免塌陷，但高度写死后，父高度不能自动适应子高度的变化。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>高度塌陷问题</title>

         <style type="text/css">

             .father{

                 border: 1px solid red;

             }

             .son{

                 width: 100px;

                 height: 100px;

                 background-color: greenyellow;

                 float: left;

                 /*设置浮动后由于子脱离文档流父子后重叠*/

             }

             .duiBi{

                 width: 1000px;

                 height: 100px;

                 background-color: pink;

             }

         </style>

     </head>

     <body>

         <div class="father">

             <div class="son">

             </div>

         </div>

             <div class="duiBi">

             </div>

     </body>

 </html>

解决方案一：

CSS高度塌陷问题与解决办法的更多相关文章

  1. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  2. CSS高度坍塌原因及解决办法

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

  3. ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)

    ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...

  4. CSS高度塌陷

    问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...

  5. 关于canvas画布使用fillRect()时高度出现双倍效果解决办法

    当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...

  6. CSS常见兼容问题以及解决办法

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...

  7. CSS高度塌陷问题解决方案

    高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  8. css 浏览兼容问题及解决办法 （2）

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...

  9. 当display=none时，元素和子元素高度为0的解决办法

    在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...

随机推荐

  1. Redis学习笔记~分布锁的使用

    回到目录 分布锁主要用在多进程共同访问同一个资源时候,用来保持同一时间段只能有一个进程执行,同时避免了并发冲突的出现,这在很多场景都会用到,像秒杀库存,抽奖库存,多操作者处理一家公司等. void T ...

  2. 流水车间调度算法分析的简单+Leapms实践--混合整数规划的启发式建模

    流水车间调度算法分析的简单+Leapms实践--混合整数规划的启发式建模 清华大学出版社出版的白丹宇教授著作<流水车间与开放车间调度算法渐近分析>采用渐近分析方法分析多个NP-难类启发调度 ...

  3. 二维剪板机下料问题（2-D Guillotine Cutting Stock Problem) 的混合整数规划精确求解——数学规划的计算智能特征

    二维剪板机下料问题(2-D Guillotine Cutting Stock Problem) 的混合整数规划精确求解——数学规划的计算智能特征 二维剪板机下料(2D-GCSP) 的混合整数规划是最优 ...

  4. 【资料总结】| Deep Reinforcement Learning 深度强化学习

    在机器学习中,我们经常会分类为有监督学习和无监督学习,但是尝尝会忽略一个重要的分支,强化学习.有监督学习和无监督学习非常好去区分,学习的目标,有无标签等都是区分标准.如果说监督学习的目标是预测,那么强 ...

  5. python的小技巧 让你的代码更美观

    持续更新.. 1,活用lambda表达式 匿名函数 lambda 可以提供很多便利.下面是举例. dic = {1:lambda a,b : a+b} 2,代码一行化. 当逻辑语句后只有一行代码的时候 ...

  6. Docker在Linux上运行NetCore系列（三）在Linux上使用Docker运行Asp.NetCore

    转发请注明此文章作者与路径,请尊重原著,违者必究. 系列文章:https://www.cnblogs.com/alunchen/p/10121379.html 开始说明 上几篇文章都是通过Linux运 ...

  7. .net接收post请求，并转为字符串

    Stream s = Request.InputStream; int count = 0; byte[] buffer = new byte[1024]; StringBuilder reqXml ...

  8. Lucene配置步骤详解

    Lucene配置步骤说明: 1.搭建环境: 2.创建索引库: 3搜索索引库. Lucene配置步骤: 第一部分:搭建环境(创建环境导入jar包) 前提:已经创建好了数据库(直接导入book.sql文件 ...

  9. JavaScript实现获取两个排序数组的中位数算法示例

    本文实例讲述了JavaScript排序代码实现获取两个排序数组的中位数算法.分享给大家供大家参考,具体如下: 题目 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . 请找出这两个 ...

  10. Dynamics 365-关于Solution的那些事(三)

    这一篇的内容,是关于Solution的使用建议的,如果大家有什么实用的建议,欢迎留言讨论. 一. 版本控制 Solution是有版本号的,率性的人可能在新建一个solution的时候,直接赋值1.0, ...