前言
我们前几篇我都谈了很多js中的很重要的知识点，今天让我们来换换口味介绍一下css中的一个知识点布局方式,我们都知道在css中的布局方式都有：定位布局，弹性布局，浮动布局，网格布局，表格布局这五种布局方，今天就让我们把面试中最常考的一款布局，在实际应用中用的最多的一款布局——浮动
浮动
当我们提及浮动的概念是会有很多人就会问浮动是什么？是在css中如何呈现呢？浮动这一款布局方式存在的意义是什么呢？那就让我们通过代码在浏览器中应用来明明白白的将浮动布局拿出来细致的聊一聊吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">'
<img width="100" height="100" src="https://img1.baidu.com/it/u=3610006291,1844666164&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="">
<p>
在我们初学js中是否有过疑问，为什么我们能够直接定义一个数字，字符串，数组，对象等类型并使用这就涉及到js最顶层的作用方法，其实我们在学习C,C++，Java语言时，都存在上述情况，这些都要回归到语法设计原理作者所创建的方法，在js中这些基础方法使用就是js的原理。在我们讲解圆形之前让我们来开始介绍**构造函数** 构造函数和普通函数之间有什么区别呢？其实没有任何区别，构造函数只不过就是new方法构造出来的，其实我们写普通函数也可以通过new来构造(不过行内默认不会以这种方式来写代码)
</p>
</div>
</body>
</html>
上面是我们自己创建的一份html我们可以看到我们使用了一张图片，以及一大段的文字，那我们可以思考一下这份代码在浏览器中的呈现方式是什么样的呢？文字是在图片的右边呢？还是在图片的下面呢？其实这就取决于标签是否为块级标签让我们在浏览器中运行看看结果吧.
根据上面的运行结果那么我们就知道了p标签是块级标签 ，那如果我们想让文字和图片出现在同一行该如何个操作呢？那我们可以在代码中添加浮动效果
<style>
img {
float: left;
}
</style>
就能让图片和文字在同一行，那我们平常看到的文字环绕在图片中就是通过浮动实现的 我们看一下这个效果是现在成果
在我们介绍浮动的过程中要提及一个新概念——文档流
文档流：就是浏览器从上到下的布局排列，遵从标签的特性，而标签被使用浮动布局时，就会脱离文档流，但文字不会被覆盖。
浮动带来的影响
让我们同通过代码在浏览器的运行来深入了解浮动的特性
<!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>
ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li{
width: 200px;
height: 50px;
float: left;
}
li:nth-child(1){
background-color: red;
}
li:nth-child(2){
background-color: yellow;
}
li:nth-child(3){
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box"></div>
</body>
</html>
上面是我们构造的三个不同颜色的块级结构1，2，3
如果我们想要让其三个在同一行可以在标签li中添加浮动float: left;如下：
我们可以想一下在没有添加浮动时标签的高度为350px，而添加浮动后都在同一行那么高度是不是为50px呢？其实并非如此它的高度为0,
为什么会出现这个情况呢？
其实这就是：浮动的负面影响
该影响产生的原因：浮动元素的高度不计算在父容器的高度之内，会导致父容器的后续容器布置和该浮动元素重叠？
那对此负面影响我们应该怎样去解决呢？
清除浮动
为了展示下面清除浮动的方法一下面代码作为操作示例：
<!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>
ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li{
width: 200px;
height: 50px;
float: left;
}
li:nth-child(1){
background-color: red;
}
li:nth-child(2){
background-color: yellow;
}
li:nth-child(3){
background-color: green;
}
.box{
width: 500px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box"></div>
</body>
</html>
1.设置父容器的高度
我们刚刚看到正是因为浮动的影响父容器的高度为0那为了消除浮动影响那我们直接给父容器设置一个高度，简单粗暴的去解决这个问题。
<style>
ul{
list-style: none;
margin: 0;
padding: 0;
height: 50px;
}
</style>
2.在浮动元素的最末尾添加一个子容器，并在这个子容器上设置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>
ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li{
width: 200px;
height: 50px;
float: left;
}
li:nth-child(1){
background-color: red;
}
li:nth-child(2){
background-color: yellow;
}
li:nth-child(3){
background-color: green;
}
.box{
width: 500px;
height: 100px;
background-color: purple;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<div class="clear"></div>
</ul>
<div class="box"></div>
</body>
</html>
上面的两种方法都存在缺点就是在后续项目内容标签过多，过量过大时这两种方法的使用效果和方式就会麻烦浪费代码
3.伪元素（最推荐）
xxx::after{
content: "";
clear: both;
display: block;
}(最推荐)
在为元素的学习中我们学到过before和after两个伪元素会有人问为什么不能用before呢？应为before是作用在标签内容运行之前，那浮动还没开始所以使用before没任何意义。
4.给后面被影响的元素添加清除浮动
于box收到了float的影响，所以我们要给box添加clear属性，我们下面来看代码：
<!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>
ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li{
width: 200px;
height: 50px;
float: left;
}
li:nth-child(1){
background-color: red;
}
li:nth-child(2){
background-color: yellow;
}
li:nth-child(3){
background-color: green;
}
.box{
width: 500px;
height: 100px;
background-color: purple;
clear: both;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box"></div>
</body>
</html>
创建BFC的方法
BFC ---block Formatting Conta 块级格式化上下文：一个拥有隔离空间的容器用。
让我们通过代码来介绍它的作用 下面这串代码是在html中经典的一个bug
<!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;
}
.parent{
width: 100vw;
height: 400px;
background-color:purple;
}
.child{
width: 100vw;
height: 200px;
background-color:yellow;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
我们添加了一个父盒子，里面又添加了一个子盒子，给他们添加颜色、高度。然后我们给子容器添加一个外边距20px我们来看一下代码的实际效果；
我们发现子盒子并没有离父盒子的上方有20px外边距，而是紧紧贴着父盒子的上方，并且把整个body拉下来了20px。这就是这个bug，而我们并不想要这个效果，该怎么去解决它呢？
这就是BFC容器存在的意义了，它一开始被设计出来就是为了解决父子容器margin重叠的问题
那我们是怎样设计BFC容器呢？我们给父盒子添加一个样式：overflow: auto; 即：
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 100vw;
height: 400px;
background-color:purple;
margin-top: 100px;
overflow: auto;
float:left
}
.child{
width: 100vw;
height: 200px;
background-color:yellow;
margin-top: 50px;
}
</style>
让我们来看看执行效果
创建BFC的方法
1.overflow:hidden || auto || overlay || scroll
2.定位：position:absolute || fixed
3.display:inline-xxxx,|| flex || grid
4.display:table || table-xxx
5.浮动： float:left || right
特征
1.bfc 容器是让处于 bfc 内部的元素与外部的元素相互隔离，使外部元素的定位不会相互影响
2.解决外边距重叠问题
3.bfc 在计算高度时，会将浮动元素的高度也计算在内
