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的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...
随机推荐
- hosts文件的作用
hosts文件的作用 hosts文件是一个没有扩展名的系统文件,可以用记事本等工具打开,作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一 ...
- C# 连接/查询Jira
查询jira数据,如果是前端,可以按照如下格式直接访问,获取数据 http://jira.company.com/rest/api/2/search?jql=project = REM AND res ...
- 折腾Java设计模式之状态模式
原文地址 折腾Java设计模式之状态模式 状态模式 在状态模式(State Pattern)中,类的行为是基于它的状态改变的.这种类型的设计模式属于行为型模式.在状态模式中,我们创建表示各种状态的对象 ...
- 两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- Util6 MIS2.0 (优六信息化管理系统框架)
Util6 MIS一套基于ASP.NET MVC5 + Layui 开发的通用信息化管理系统快速开发框架 系统操作界面简洁, 项目结构清晰,功能模块化设计,支撑框架轻量高效,代码层级分离,注释完整,可 ...
- Dynamics 365-关于Activity定制的一个细节
有一个需求,是Lead上的activity创建的时候,更新regarding Entity上的某个字段信息.需求很简单,写个plugin,注册到对应activity的create事件上,Over... ...
- android studio gradle 更新方法。
Android studio更新 第一步:在你所在项目文件夹下:你项目根目录gradlewrapper gradle-wrapper.properties (只要在打开项目的时候选OK,这个文件就 ...
- 一起学Android之Intent
本文简述在Android开发中Intent的常见应用,仅供学习分享使用. 什么是Intent? Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Inten ...
- MyDAL - .Where() & .And() & .Or() 使用
索引: 目录索引 一.API 列表 1.Where .Where(Func<M, bool> func) 如: .Where( it => (it.Prop1>=条件1 &am ...
- SQL Server数据仓库的基础架构规划
问题 SQL Server数据仓库具有自己的特征和行为属性,有别去其他.从这个意义上说,数据仓库基础架构规划需要与标准SQL Server OLTP数据库系统的规划不同.在本文中,我们将介绍在计划数据 ...