问题描述：

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

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

 <!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. Flink中的Time

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  2. C++11 (多线程)并发编程总结

    | 线程 std::thread 创建std::thread,一般会绑定一个底层的线程.若该thread还绑定好函数对象,则即刻将该函数运行于thread的底层线程. 线程相关的很多默认是move语义 ...

  3. （转载）JSON.stringfy()和JSON.parse()的作用

    原文链接:https://www.cnblogs.com/shytong/p/4960418.html 一篇详细的介绍和对比,转载自 博客园 “很好玩的博客” 的一片博文,非常感谢他贡献优质文章.

  4. C# WebRequest.Create 锚点“#”字符问题

    背景 在与后台API接口对接时,如将网页Url作为参数请求数据时,如果是锚点参数,则会丢失. 锚点参数 请求通过WebRequest.Create创建一个WebRequest: var uri = & ...

  5. mysql 存储ip地址

    mysql提供了两个方法来处理ip地址: inet_aton 把ip转为无符号整型(4-8位) inet_ntoa 把整型的ip转为电地址 插入数据前,先用inet_aton把ip地址转为整型,可以节 ...

  6. 《JavaScript高级程序设计》笔记：BOM（八）

    BOM(浏览器对象模型)提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象 全局作用域 定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过 ...

  7. Jinja2用法总结

    Jinja2用法总结   一:渲染模版 要渲染一个模板,通过render_template方法即可. @app.route('/about/') def about(): # return rende ...

  8. Android ListView的基本应用

    ListView可以说是Android原生开发最基本.最重要的控件之一,良好的使用ListView可以让自己的项目得到提高,下面是ListView最简单的应用方式 定义ListViewlist_vie ...

  9. 浅谈Flutter（一）：搭建Flutter开发环境

    学习内容来自: Flutter中文网  . Flutter实战 -------------------------------------------------------------------- ...

  10. 未找到导入的项目“C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Props”

    未找到导入的项目“C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Props” ...