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的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...
随机推荐
- 一个简单的HTML5 Web Worker 多线程与线程池应用
笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...
- 1.4部署到IIS「深入浅出ASP.NET Core系列」
希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 很多人第一次在IIS中部署Asp.Net Core App的人都会遇到问题,会发现原来的部署方式无法运行Asp.N ...
- 从QA到工程能效团队
Engineering Productivity Productivity is our job; testing and quality are the job of everyone involv ...
- .net简介（一）
什么是.NET 微软的开发平台,包含规范.编程语言.标准类.工具等.一般认为.net就是微软的软件开发技术.同时微软的所有产品也提供.NET类型的API. .NET概览 .net的组成: 开发语言,遵 ...
- ajax验证用户名是否存在
jsp页面 <head> <script type="text/javascript" src="js/register.js">< ...
- PHP基础笔记
今天一个阳光明媚的大周天,小崔百无聊赖的翻看着各种老旧的经典电影,无奈谁让自己是没女朋友的单身狗呢.闲来无事就记录一下PHP的一些基础知识吧! 1.PHP是什么? PHP是一种创建动态交互性站点的服务 ...
- 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠
写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...
- Android开发支付集成——微信集成
支付宝支付传送门:https://www.cnblogs.com/dingxiansen/p/9208949.html 二.微信支付 1. 微信支付流程图 相比较而言,微信支付是要比支付宝麻烦一些,并 ...
- 基于django的视频点播网站开发
项目名称 基于django的视频点播网站开发 项目背景 学习完毕python和django之后,想找个项目练练手,本来想写个博客项目练手,无奈别人已经写过了,所以笔者就打算写一个视频点播网站,因为笔者 ...
- 为了约会，PM的领导能力篇来啦！
之前我们花了很大力气阐述PM的过程能力成熟度,为的是让PM把项目管理得心应手,早点下班.可再完美的过程也要人来做啊!兄弟们要是不爽了,你还有心思约会么?那怎么才能管好组里的兄弟,让他们好好执行过程,早 ...