CSS高度坍塌原因及解决办法
2024-09-08 16:03:57
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高.
但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱.
解决办法:
1.父元素设置overflow属性设置为hidden;
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
.parent {
background-color: #2aabd2;
overflow: hidden;
} .children {
width: 100px;
height: 100px;
background-color: #8a6d3b;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
2.给父元素设置:after伪类
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
.parent {
background-color: #2aabd2;
} .parent:after {
content: '';
display: block;
clear: both;
} .children {
width: 100px;
height: 100px;
background-color: #8a6d3b;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
最新文章
- mac好用的markdown编辑器
- ubuntu 15.04 安装配置 JDK1.8
- <;转>;SQL语句大全
- zabbix_server的自动发现,实现批量添加主机,并链接到模板
- JdbcTemplae使用入门&;&;Spring三种连接池配置&;&;Spring配置文件引用外部properties文件
- mongodb(4查询)
- Web Service 接口实现大量数据传输的解决方案
- 结合Retrofit,RxJava,Okhttp,FastJson的网络框架RRO
- bash脚本退出代码解释
- thinkphp中select()和find()的区别
- HDU 2209 翻纸牌游戏
- Azure ARM (18) 将传统的ASM VM迁移到ARM VM (1)
- SpringMvc解决Restful中文乱码问题
- laravel 中的rbac自己简单的实现
- 学习 Vim —— Vimtutor 总结笔记
- Neovim中提示Error: Required vim compiled with +python
- WWSSN instrument response
- 写一个小程序实现win系统定时锁屏
- [Android]Adb connection Error:远程主机强迫关闭了一个现有的连接
- new Date()相关获取当月天数和当月第一天