CSS高度塌陷问题与解决办法
问题描述：
在文档流中，父元素默认被子元素撑开（父多高子多高），一旦子浮动，脱离文档流，父无撑起元素便塌陷，父下的所有元素会上移。
（不推荐）可以将父高度写死避免塌陷，但高度写死后，父高度不能自动适应子高度的变化。
<!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高度塌陷问题与解决办法的更多相关文章
- CSS浮动布局带来的高度塌陷以及其解决办法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- CSS高度坍塌原因及解决办法
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父 ...
- ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)
ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...
- CSS高度塌陷
问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...
- 关于canvas画布使用fillRect()时高度出现双倍效果解决办法
当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...
- CSS常见兼容问题以及解决办法
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...
- CSS高度塌陷问题解决方案
高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- css 浏览兼容问题及解决办法 （2）
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...
- 当display=none时，元素和子元素高度为0的解决办法
在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...
随机推荐
- 声明式RESTful客户端在asp.net core中的应用
1 声明式RESTful客户端 声明式服务调用的客户端,常见有安卓的Retrofit.SpringCloud的Feign等,.net有Refit和WebApiClient,这些客户端都是以java或. ...
- Redis协议规范(RESP)
Redis 即 REmote Dictionary Server (远程字典服务): 而Redis的协议规范是 Redis Serialization Protocol (Redis序列化协议) 该协 ...
- 【Java】留下没有基础眼泪的面试题
前言 只有光头才能变强 本文力求简单讲清每个知识点,希望大家看完能有所收获 一.如何减少线程上下文切换 使用多线程时,不是多线程能提升程序的执行速度,使用多线程是为了更好地利用CPU资源! 程序在执行 ...
- Netflix网关zuul(1.x和2.x)全解析
zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul可以通过加载动态过滤机制,从而实现以下各项功能: 验证与安全保障: 识别面向各类 ...
- json属性名必须加引号的讨论
优质参考资料: 1.https://blog.csdn.net/Goskalrie/article/details/52151175 2.https://blog.csdn.net/weixin_42 ...
- MVC 中 Razor引擎学习：RenderBody，RenderPage和RenderSection
RenderBody 在Razor引擎中没有了“母版页”,取而代之的是叫做“布局”的页面(_Layout.cshtml)放在了共享视图文件夹中.在这个页面中,会看到 标签里有这样一条语句: @Rend ...
- 对HTML5标签的认识(三)
这篇随笔继续来认识HTML标签.这次随笔主要是对<table>标签的认识和最近我学习到的一些标签来和大家分享. 一.<table>标签 <table>标签的作用主要 ...
- 关于图片适配不同尺寸的image View（实战）
分享人:广州华软 佐罗 一. 前言 在前端开发过程中,设计稿中往往只提供一张图片,但是app内需要用到的尺寸各种各样. 同时图片不仅是信息的直接表达,也会为网站起到美观点缀的作用,图片的变形.过分裁切 ...
- 清理mac的硬盘空间，清理Xcode，清除“其他”
下面是一些清理的方法:打开Finder使用快捷键command+shift+g输入路径即可进入该文件夹 1. 移除DerivedData,建议定期清理,会重新生成 此文件夹内是模拟器运行每个APP生成 ...
- Android与js互相调用
有话要说: 本篇主要总结了简单的Android与js互相调用的方法. 在开发过程中遇到了需要在安卓中调用js方法的需求,于是将具体的实现过程总结成这篇博客. 效果: 其中“调用安卓方法”按钮是html ...