引言
如果你不会浮动布局，别说你会切页面
第一个概念：文档流
简单说：页面根据三种类型的元素（行内元素、块级元素、行内块级元素）从左到右，从上到下，依次排列。
第二个概念：浮动布局
什么是浮动布局？
看着这个页面，你告诉我，图片的左边放文字好不好？
既然说好，那我们就需要将这个图片设置为浮动的： float: left;这就是浮动布局的简单认识，将某个元素从文档流中抽离出来。
设置浮动布局的两种方式
方法一：直接设置float: left;
方法二：采用设置行内块级元素的办法实现浮动布局效果，缺点：li 标签之间有间隔问题，看下面的demo
这是一份简单的代码
<!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>
* {
margin: 0;
padding: 0;
}
li {
width: 300px;
height: 100px;
display: inline-block;
}
li:nth-child(1) {
background-color: aqua;
}
li:nth-child(2) {
background-color: blue;
}
li:nth-child(3) {
background-color: brown;
}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
这是它的呈现效果：可以看到，在元素之间有间隙
不废话，为什么会有间隙？
这是因为li标签之间换行了，换行符带来的间隙。
怎么解决？
1、把li标签全部写在一行里，------不建议
2、父容器：font-size: 0; 在子容器上重新设置font-size------依然不建议
你可能要说我在耍你，别急，因为我压根不建议采用第二种实现浮动布局的方法，过于繁琐。
第三个概念：清除浮动
一、为什么要清除浮动？
采用直接设置float: left;设置浮动布局，接着上面的那份demo，修改HTML部分：新增一个h2标签，随便写点东西
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<div class="clear"></div>
</ul>
<h2>hello</h2>
</body>
页面展示效果如下：
看完回答我一个问题：后续新增内容会被迫受前面元素浮动的影响，比如这个“hello”，本来按照文档流应该在ul标签下面的，但是因为受前面的浮动影响，被迫往前走，来到他们的右边，这样好吗？
很明显，这不好。前面的元素为了排列采用浮动布局是正常的，但是不能影响后续元素的排列，因此我们需要清除浮动
二、清除浮动的办法
方法一：直接设置父容器的高度
解释：
“hello”与在li标签在同一行后接着排列，是因为ul标签没有高度，我们一开始也没有设置高度，它的高度完全是由它包含的内容的高度撑开的——li标签的高度。所以，按照文档流的元素排列规则，“hello”来到了li标签的后面。
因此，如果我们给ul标签（父容器）设置高度，和子元素一样的高度，按照文档流的排列，“hello”就会按照文档流排列下来，生硬实现消除浮动的效果
弊端：如果子元素的高度变化了呢？父元素的高度也要跟着动，这样好吗？
答：不好，所以作者十分不推荐这种消除浮动方法
方法二：在浮动元素的末尾添加一个空的div，设置clear: both;
看这份代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3.html</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
width: 300px;
height: 100px;
float: left;
}
.clear {
/* 只清除左浮动 */
/* clear: left; */
/* 不管左浮动还是右浮动，都可以清除浮动 */
clear: both;
}
li:nth-child(1) {
background-color: aqua;
}
li:nth-child(2) {
background-color: blue;
}
li:nth-child(3) {
background-color: brown;
}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<div class="clear"></div>
</ul>
<h2>hello</h2>
</body>
</html>
效果如下：
不解释，这个方法就是这么用的，但我想说的是，仍然不推荐
解释：对于一个大型的项目，采用这种方法会要多写很多这种代码，过于繁琐，所以不推荐。
方法三：伪元素清除浮动
看这份代码，在ul标签上设置的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4.html</title>
<style>
* {
margin: 0;
padding: 0;
}
.list::after {
content: '';
clear: both;
display: block;
}
li {
width: 300px;
height: 100px;
float: left;
}
li:nth-child(1) {
background-color: aqua;
}
li:nth-child(2) {
background-color: blue;
}
li:nth-child(3) {
background-color: brown;
}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h2 class="title">hello</h2>
</body>
</html>
解释：父容器::after是指在这个元素的末尾添加一个伪类元素，把这个伪类元素设置为块级元素，并利用clear: both;清除浮动。先说作者的观点：推荐
这是因为只需要修改父容器的css属性即可实现清除浮动效果，不涉及HTML代码的改动。
方法四：给被浮动影响的容器做清除浮动
看这份代码：
改动地方：对.title设置了clear: both;
效果不展示，和前面一样。
作者观点：不推荐
理由：不利于后续维护，谁带来的浮动影响，就应该由谁去解决，而不是留给后来者。
<!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>
* {
margin: 0;
padding: 0;
}
li {
width: 300px;
height: 100px;
float: left;
}
li:nth-child(1) {
background-color: aqua;
}
li:nth-child(2) {
background-color: blue;
}
li:nth-child(3) {
background-color: brown;
}
.title {
clear: both;
}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h2 class="title">hello</h2>
</body>
</html>
方法五：将浮动元素的父容器设置为BFC容器
什么是BFC容器？
简单理解：块级格式化上下文，类似JS里的块级作用域，但和块级作用域没有关系，只是类比。
怎么使用BFC容器？
直接对父容器设置overflow: hidden;
需要声明的是：BFC容器本意并不是为了实现清除浮动的，只是瞎猫碰上死耗子，它是用来修复一个bug的
哪个bug？
看一份代码： 告诉我，页面最上面是50px的白色还是紫色？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BUG</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
height: 500px;
background-color: aquamarine;
}
.child {
height: 200px;
background-color: blueviolet;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
页面效果：如图，页面最上面是白色的，我们设置子元素的margin-top: 50px;但是却导致父元素距离顶部50px，这就是那个bug：默认情况下，子容器 margin-top 会和 margin-top 重叠
如果我们给父容器设置margin-top: 100px;，会是什么效果？看图：
父容器距离顶部的距离变为了100px
所以，这个bug就是：默认情况下，子容器 margin-top 会和 margin-top 重叠
BFC容器的本意就是为了解决这个bug
BFC容器解决重叠BUG
对父容器设置overflow: hidden;
这样设置后，父容器就变成了一个独立的块级容器。
效果：子容器距离父容器顶部50px，这才符合正常想法
BFC容器特点：
1. 当一个容器被设置为BFC容器后，它会拥有一套独特的渲染规则
2. 子容器的margin-top不会和父容器的margin-top重叠
3. BFC 容器在计算高度时，会包含浮动元素的高度
如何设置BFC容器
在父容器设置以下属性：不解释，纯记忆
1. overflow: hidden || auto | || scroll || overlay;
2. position: absolute || fixed;
3. display: inline-xxx || flex || grid;
4. float: left || right;
