CSS高度坍塌问题的原因以及解决办法
原因:
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
border: 1px solid;
} .c1,.c2 {
width: 100px;
height: 100px;
float: left;
} .c1 {
background: red;
} .c2 {
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
解决办法:
1、给父元素一个固定高度,但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以此方法适用于子元素高度已知并且固定的情况,是不推荐使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
border: 1px solid;
height: 200px;
} .c1,.c2 {
width: 100px;
height: 100px;
float: left;
} .c1 {
background: red;
} .c2 {
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
2、在父元素最后添加一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
border: 1px solid;
} .c1,.c2 {
width: 100px;
height: 100px;
float: left;
} .c1 {
background: red;
} .c2 {
background: blue;
} .clear {clear: left;}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
<div class="clear"></div>
</div>
</body>
</html>
3、给父元素添加 overflow：hidden；这是开发中最应用最多的一种做法。
这个属性和值是当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉。
当子元素浮动时，给父元素添加overflow：hidden，按照它的本身特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
border: 1px solid;
overflow: hidden;
} .c1,.c2 {
width: 100px;
height: 100px;
float: left;
} .c1 {
background: red;
} .c2 {
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
4、通过伪元素选择器::after清除浮动,缺点代码过多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
border: 1px solid;
} .c1,.c2 {
width: 100px;
height: 100px;
float: left;
} .c1 {
background: red;
} .c2 {
background: blue;
} .box::after {
content: "";
display: block;
clear: left;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
总结:推荐使用第三种解决方案,代码量和带来的影响最小。
CSS高度坍塌问题的原因以及解决办法的更多相关文章
- 前端学习 -- Css -- 高度坍塌问题的产生以及解决
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...
- 各种编码问题产生原因以及解决办法---------响应编码，请求编码，URL编码
响应编码 产生原因以及解决办法: 示例: package cn.yzu; import java.io.IOException; import javax.servlet.ServletExcept ...
- .Net内存泄露原因及解决办法
.Net内存泄露原因及解决办法 1. 什么是.Net内存泄露 (1).NET 应用程序中的内存 您大概已经知道,.NET 应用程序中要使用多种类型的内存,包括:堆栈.非托管堆和托管堆.这里我们需 ...
- Oracle死锁产生的原因和解决办法
如果有两个会话,每个会话都持有另一个会话想要的资源,此时就会发生死锁.用下面实验来说明死锁的产生原因和解决办法.SESSION1:SQL> create table t2 as select * ...
- HttpClient的CircularRedirectException异常原因及解决办法
HttpClient的CircularRedirectException异常原因及解决办法 这两天在使用我自己爬虫抓取网页的时候总是出现 org.apache.http.client.ClientPr ...
- php_curl.dll libssh2.dll 始终无法加载的原因 及解决办法
在StackOverflow得到最终原因及解决办法 http://stackoverflow.com/questions/16424117/php-unable-to-load-php-curl-dl ...
- mysql保存中文乱码的原因和解决办法
当你遇到这个mysql保存中文乱码问题的时候,期待找到mysql保存中文乱码的原因和解决办法这样一篇能解决问题的文章是多么激动人心. 也许30%的程序员会选择自己百度,结果发现网友已经贴了很多类 ...
- eclipse中tomcat发布失败（Could not delete May be locked by another process）原因及解决办法
在eclipse中tomcat发布项目时,偶尔出现了以下情况: publishing to tomcat v7.0 services at localhost has encountered a pr ...
随机推荐
- 最长不重复子串长度，时间复杂度O(n)，空间复杂度O(n)，Python实现
def lengthOfLongestSubstring(s): res = 0 d = {} tmp = 0 start = 0 for i in range(len(s)): if s[i] in ...
- SQLite 数据类型与C#数据类型对应表
SQLite 数据类型 C# 数据类型 BIGINT Int64 BIGUINT UInt64 BINARY Binary BIT Boolean 首选 BLOB Binary ...
- opencart升级 各种坑 没有主题，没有扩展，权限等问题
1.后台导航菜单没有扩展功能(扩展不显示) 2.只要是报错显示DIR_XXXX 基本都是config.php 和 admin/config.php 这两配置文件有关 我这问题是config.ph ...
- Java-Thread 线程
一.进程与线程的概念 进程和线程都是一个CPU工作时间段的描述,只是关注点不同. 进程(Process): 资源(CPU,内存等,文件,网络等)分配的基本单位.系统中有很多进程,它们都会使用内存.为了 ...
- DeepFaceLab参数详解之Batch-Size的使用和取值！
Batch-Size简称BS. 这是一个非常常见的参数,所有模型都具备的一个参数. 这其实是深度学习中的一个基础概念.要说理论可以说出一大堆,大家可以先简单的理解为一次处理的图片张数.为了防止吓跑小白 ...
- JavaEE-实验一 Java常用工具类编程
该博客仅专为我的小伙伴提供参考而附加,没空加上代码具体解析,望各位谅解 1. 使用类String类的分割split 将字符串 “Solutions to selected exercises ca ...
- zk 两阶段提交（待完善）
zk 节点是一个 QuorumPeer,选举结束后,leader 和 follower 各自执行自己的逻辑: org.apache.zookeeper.server.quorum.QuorumPeer ...
- 一键发布shell脚本
1.配置集群间免密登录 (1)配置host:vim /etc/hosts (2)生成公钥 :ssh-keygen -t rsa -P '' 这时会提示生成的公钥的存放地址,直接回车,公钥生成成功 (3 ...
- CPU性能监测介绍
CPU的性能监测包含以下部分: * 检查系统运行队列并确保每个核心上不超过3个可运行进程* 确保CPU利用率的用户时间和系统时间在70/30之间* 当CPU花费更多的时间在system mode上时, ...
- 微信小程序UI学习
1.大纲: 2.flex的布局: 3.相对定位和绝对定位: position: relative 相对定位 position: absolute 绝对定位