问题描述：

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

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

 <!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. nginx rewrite 实现URL跳转

    最近工作中常常要改nginx配置,学习了nginx中rewrite的用法 URL跳转这里说的URL跳转就是用户在访问一个URL时将其跳转到另一个URL上.常见的应用场景是让多个域名跳转到同一个URL上 ...

  2. ___Html页面使用Ajax做数据显示

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

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

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

  4. nginx 启动错误

    场景 在Windows下 启动nginx报错: nginx: [error] ReadFile() : Incorrect function) 解决 因为 nginx.conf 中存在 /* 被认为是 ...

  5. es6基础知识

    1.超引用:(...) 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 function fun(...args){ console.log(args); //[1,2,3,4,5,6] ar ...

  6. Android远程桌面助手(B1371)

    Android远程桌面助手(B1371),下载:https://files.cnblogs.com/files/we-hjb/ARDC%28B1371%29.7z 1.增加了对超大分辨率4320*21 ...

  7. C++ 子类继承父类纯虚函数、虚函数和普通函数的区别

    C++三大特性:封装.继承.多态,今天给大家好好说说继承的奥妙 1.虚函数: C++的虚函数主要作用是“运行时多态”,父类中提供虚函数的实现,为子类提供默认的函数实现.子类可以重写父类的虚函数实现子类 ...

  8. spring mvc 在上传图片时，浏览器报The request sent by the client was syntactically incorrect

    项目中,在一个jsp页面里其它图片上传是功能是可以使用的,当我自己新加了一个图片上传时,提交表单后,浏览器报The request sent by the client was syntactical ...

  9. vsftpd.configro

    mmp卸载了vsftpd后 配置文件没了 安装也没有 留个做备份 嘿嘿 原始的: # Please see vsftpd.conf. for all compiled in defaults. # # ...

  10. 影响Linux发展的四位天才黑客

    影响Linux发展的四位天才黑客 相信大家对 Linux 再熟悉不过了.我们都知道 Linux继承自 Unix,但其实他们上一代还有一个 Multics.从最早的 Multics 发展到最早版本的 L ...