本文主要说明float clear 区块格式化上下文（Block Formatting Context，BFC） 相关知识
[BFC](区块格式化上下文 - CSS：层叠样式表 | MDN (mozilla.org))
float：指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除
clear：clear CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素
BFC：是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
触发条件：
- 文档的根元素（
<html>）。 - 浮动元素（即
float值不为none的元素）。 - 绝对定位元素（
position值为absolute或fixed的元素）。 - 行内块元素（
display值为inline-block的元素）。 - 表格单元格（
display值为table-cell，HTML 表格单元格默认值） overflow值不为visible或clip的块级元素。display值为flow-root的元素。
格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：
- 包含内部浮动。
- 排除外部浮动。
- 阻止外边距重叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.main {
width: 800px;
/* 如果不给父元素设置高 则内部子元素设置了浮动后 因为脱离了原来的文档流 所以会塌陷 --需要手动解决*/
/* height: 300px; */
border: 1px solid #ccc;
overflow: hidden;
}
.child1 {
width: 200px;
height: 100px;
background-color: aqua;
float: right;
}
.child2 {
width: 200px;
height: 100px;
background-color: bisque;
float: right;
}
/* 当 两个child 都添加浮动时 已经脱离了文档流 所以 p标签会占据上方位置 */
p {
background-color: aquamarine;
clear: right;
/* 当我清除浮动时 left right both 元素会占用浮动元素下方位置 */
/* 官方定义 clear CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素 */
}
.clear {
clear: both;
}
/* .main::after {
content: '';
display: block;
clear: both;
} */
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 如果声明重复了 选项会合并 后面的会覆盖前面的 */
/* .main {
height: 500px;
} */
</style>
</head>
<body>
<div class="main">
<div class="child1"></div>
<div class="child2"></div>
<!-- <p>这是一段文字</p> -->
<!-- <div class="clear"></div> -->
</div>
<!-- 解决父元素塌陷问题
1 添加div 设置clear
2 给父元素添加伪元素 设置content display clear
3 将伪元素单独提取成一个类 添加类名即可
3 使用 overflow:hidden
-->
</body>
</html>
防止外边距重叠
在这个示例中，我们将第二个 <div> 包裹在另外一个 <div> 之中，以创建一个新的 BFC，防止外边距重叠。
重点是在需要阻止重叠的盒子外面添加一个盒子！
<div class="blue"></div>
<div class="outer">
<div class="red"></div>
</div>
.blue,
.red {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red {
background: red;
}
.outer {
overflow: hidden;
background: transparent;
}
