re:从0开始的CSS之旅 16. 高度塌陷问题

1. 高度塌陷问题

高度塌陷问题:在文档流中,父元素的高度默认是被子元素撑开的,子元素多高,父元素就多高。

但是当子元素设置浮动后,我们发现子元素在页面中的位置没变,但是父元素的高度却塌陷了 (没有被子元素撑开)

父元素在文档流中一旦发生高度塌陷的问题,将影响整个页面的布局。

因此,高度塌陷的问题我们必须解决!

高度塌陷问题的解决办法:

  1. 可以根据子元素的高度设置父元素的高度,使页面看起来不塌陷

    但是我们有事无法确定父元素的具体高度。因此,不建议使用。

    例如:评论展示、新闻阅读等

  2. BFC(Block Formatting Context)块级格式化上下文

    在W3C标准中,页面元素都有一个隐藏的属性,简称BFC

    开启BFC后,元素将具有以下特点:

    1. 父元素的垂直外边距不会和子元素重叠

    2. 开启BFC的元素不会被浮动元素覆盖

    3. 开启BFC的元素可以包含浮动元素

      如何开启BFC:

      1. 设置元素浮动

      2. 设置元素绝对定位

      3. 设置元素为inline-block

      上述三种方式能解决高度塌陷的问题,但是宽度会丢失,因此不推荐使用

      1. 设置元素的overflow: hidden
  3. clear属性清除浮动,用于清楚浮动对元素造成的影响

    可选值:
    none 不清除浮动(默认值)
    left 清除左侧浮动
    right 清除右侧浮动
    both 清除两侧浮动

思路:

  1. 为需要解决高度塌陷问题的父元素再创建一个子元素

因为仅解决高度塌陷问题,因此使用伪元素创建更恰当

  1. 该子元素需要清除第一个元素浮动带来的影响
    html .clearfix::after, .clearfix::before { content: ""; display: table; clear: both; }

示例如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>High collapse problem</title>
	
	.father {
		border: 10px solid red;
	
		/* float: left; */
		/* display: inline-block; */
		/* overflow: hidden; */
	}
	
	.son {
		width: 200px;
		height: 200px;
		background-color: #c7edcc;
	
		/* 设置浮动 */
		float: left;
	}
	
	/* 伪元素创建的元素为行内元素,我们需要将行内元素转换为块元素 */
	/* 该通用代码既可以解决高度塌陷问题,又可以解决垂直外边距合并 */
	.clearfix::after,
	.clearfix::before {
		content: "";
		display: table;
		clear: both;
	}
	
	/* 演示clear清除浮动 */
	/* .outer1 {
		width: 400px;
		height: 400px;
		background-color: #fde6e0;
	
		float: left;
	}
	
	.outer2 {
		width: 300px;
		height: 300px;
		background-color: #dce2f1;
	
		float: right;
	}
	
	.outer3 {
		width: 100px;
		height: 100px;
		background-color: yellowgreen;
	
		clear: both;
	} */
</head>

<body>
	<div class="father clearfix">
		<div class="son"></div>
	</div>

	<!-- <hr>

	<div class="outer1"></div>
	<div class="outer2"></div>

	<div class="outer3"></div> -->
</body>


</html>
相关推荐
青皮桔28 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺28 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
影子信息33 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月34 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201838 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿39 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html