BFC/clear/::after伪元素 解决高度坍塌, ::before解决外边距重叠 （clearfix同时解决高度塌陷和外边距重叠）（css）
高度塌陷的问题：
- 在浮动布局中，父元素的高度默认是被子元素撑开；
- 当子元素浮动后，其会完全脱离文档流，将会无法撑起父元素的高度，导致父元素的高度丢失
BFC（Block Formatting Context） 块级格式化环境
- BFC是一个CSS中的一个隐含属性，可以为一个元素开启，开启BFC后该元素会变成一个独立的布局区域
- 元素开启BFC后的特点：
1. 开启BFC的元素不会被浮动元素所覆盖
2. 开启BFC的元素子元素和父元素外边距不会重叠
3. 开启BFC的元素可以包含浮动的子元素
. - 通过一些特殊方式来开启元素的BFC：
- 设置元素的浮动（不推荐）
- 将元素设置为行内块元素（不推荐）
- 将元素的
overfiow设置为一个非visible的值- 常用的方式：为元素设置
overflow: hidden开启其BFC 以使其可以包含浮动元素
- 常用的方式：为元素设置
clear
（如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清楚浮动元素对当前元素所产生的影响）
- 作用：清楚浮动元素对当前元素所产生的影响
| clear: xxx; | |
|---|---|
left |
清除左侧浮动元素对当前元素的影响 |
right |
清除右侧浮动元素对当前元素的影响 |
both |
清除两侧中最大影响的那侧 |
- 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响.
::after伪元素解决高度坍塌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>after伪元素清除元素坍塌</title>
</head>
<style>
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: #bbffaa;
float: left;
}
.box1::after{
/* 相当于在box1中box2后面添加一个标签 用它来撑开父元素*/
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
::before解决外边距重叠问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::before解决外边距重叠</title>
</head>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box1::before{
content: '';
display: table;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
clearfix同时解决高度坍塌与外边距重叠问题
/* clearfix解决外边距重叠*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clearfix解决外边距重叠 </title>
</head>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
/*clearfix解决高度塌陷 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clearfix解决高度塌陷</title>
</head>
<style>
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>