1. 高度塌陷问题
高度塌陷问题：在文档流中，父元素的高度默认是被子元素撑开的，子元素多高，父元素就多高。
但是当子元素设置浮动后，我们发现子元素在页面中的位置没变，但是父元素的高度却塌陷了（没有被子元素撑开）
父元素在文档流中一旦发生高度塌陷的问题，将影响整个页面的布局。
因此，高度塌陷的问题我们必须解决！
高度塌陷问题的解决办法：
-
可以根据子元素的高度设置父元素的高度，使页面看起来不塌陷
但是我们有事无法确定父元素的具体高度。因此，不建议使用。
例如：评论展示、新闻阅读等 -
BFC（Block Formatting Context）块级格式化上下文
在W3C标准中，页面元素都有一个隐藏的属性，简称BFC
开启BFC后，元素将具有以下特点：-
父元素的垂直外边距不会和子元素重叠
-
开启BFC的元素不会被浮动元素覆盖
-
开启BFC的元素可以包含浮动元素
如何开启BFC：
1. 设置元素浮动
2. 设置元素绝对定位
3. 设置元素为inline-block
上述三种方式能解决高度塌陷的问题，但是宽度会丢失，因此不推荐使用
4. 设置元素的overflow: hidden
-
-
clear属性清除浮动，用于清楚浮动对元素造成的影响
可选值：
none不清除浮动（默认值）
left清除左侧浮动
right清除右侧浮动
both清除两侧浮动
思路：
1. 为需要解决高度塌陷问题的父元素再创建一个子元素
因为仅解决高度塌陷问题，因此使用伪元素创建更恰当
2. 该子元素需要清除第一个元素浮动带来的影响
html .clearfix::after, .clearfix::before { content: ""; display: table; clear: both; }
示例如下：
<!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>
--DOM基本概念 获取元素 点击事件 键盘事件)
