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

1. 高度塌陷问题

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

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

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

因此，高度塌陷的问题我们必须解决！

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

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

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

例如：评论展示、新闻阅读等
BFC（Block Formatting Context）块级格式化上下文

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

开启BFC后，元素将具有以下特点：
1. 父元素的垂直外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素覆盖
3. 开启BFC的元素可以包含浮动元素
  
  如何开启BFC：
  1. 设置元素浮动
  2. 设置元素绝对定位
  3. 设置元素为inline-block
  上述三种方式能解决高度塌陷的问题，但是宽度会丢失，因此不推荐使用
  1. 设置元素的overflow: hidden
clear属性清除浮动，用于清楚浮动对元素造成的影响

可选值：
none 不清除浮动（默认值）
left 清除左侧浮动
right 清除右侧浮动
both 清除两侧浮动

思路：

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

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

该子元素需要清除第一个元素浮动带来的影响
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>