本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了 浮动布局 以及 如何清除浮动。
感觉有帮助的小伙伴请点赞👍鼓励一下~
标准文档流
了解浮动之前，先来了解一下 标准文档流， 指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式 。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
浮动布局
什么是浮动布局
所谓 css 浮动就是浮动元素会脱离文档的普通流，根据 float 的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
为什么会有浮动
因为当初设计 float 的目的是为了能实现文字能够环绕图片的排版功能。
浮动布局的生成
css 属性 float：left/right/none 左浮动/右浮动/不浮动（默认）。
浮动的影响
我们从一段代码来分析浮动都带来了哪些影响。
<style>
body {
background: gray;
margin: 0;
padding: 0;
}
.float-container {
width: 800px;
background: black;
}
.box1 {
width: 800px;
height: 30px;
background: yellow;
}
.box2 {
width: 800px;
height: 30px;
background: blue;
}
.box3 {
width: 200px;
height: 200px;
background: white;
float: left;
opacity: 0.5;
line-height: 200px;
}
.box4 {
width: 800px;
height: 30px;
background: green;
}
.box5 {
width: 800px;
height: 30px;
background: purple;
}
.other-container {
width: 800px;
height: 100px;
background: orange;
}
</style>
<body>
<div class="float-container">
<div class="box1">我是一个普通的元素,我是黄色的</div>
<div class="box2">我是一个普通的元素,我是蓝色的</div>
<div class="box3">我是浮动的元素,我是白色的</div>
<div class="box4">我是一个普通的元素,我是绿色的</div>
<div class="box5">我是一个普通的元素,我是紫色的</div>
</div>
<div class="other-container">
我是父元素的兄弟元素,也叫叔叔元素,我没有浮动,我是橙色的
</div>
</body>
结果如下图所示。
接下来我们分析一下影响。
缩短其他元素的行框
可以看到 box4 ，box5 以及叔叔元素 other-container 的文字并没有从头开始，而是避开了浮动元素 box3 。
原因是浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
父元素高度塌陷
父元素的高度默认是由子元素的高度撑起来的，所以我们的父元素 float-container 的高度应该是五个box的高度加起来，也就是 320px 。但实际我们通过图中得知只有 120px。
原因是当子元素脱离标准文档流以后，父元素的高度就没有了，从而造成父元素高度塌陷现象。
影响了兄弟元素
因为浮动元素脱离了标准文档流，所以其他元素就会占据浮动元素原来的位置，影响布局。
影响了叔叔元素
因为父元素的高度塌陷了，所以叔叔元素的布局也会受到影响。
如何清除浮动
父级元素也浮动
我们给浮动元素的父元素也设置个浮动。原理其实也是利用了 BFC ，因为浮动元素本身触发了 BFC 。但是这种方式抽象在还要处理爷爷的浮动，爷爷的爷爷的浮动，子子孙孙无穷尽也。
父级元素添加绝对定位
我们通过给父元素添加 position: absolute 也可以清除，由于绝对定位同样脱离标准流，同样会影响布局。但你也要知道这种清除方法。
空块元素结合clear属性
我们在父级元素的结束标签之前添加一个空的块级元素，然后添加 clear: both 属性，可以达到清除浮动的目的。
利用伪元素
我们给父元素添加一个伪元素，然后再进行 clear ，原理其实也是利用了 clear: both 。
.float-container::after {
content: '.';
height: 0;
display: block;
clear: both;
}
利用BFC
我们利用 BFC 的区域不会与 float 重叠；计算 BFC 的高度时，浮动元素也參与计算的特性，使父元素成为一个 BFC，也可以清除浮动。
.float-container {
overflow: hidden;
}
浮动的应用
文字环绕效果
这个是浮动产生的原因，也是最基础的应用。
<style>
body {
background: gray;
margin: 0;
padding: 0;
}
.container {
width: 800px;
}
.box1 {
width: 100px;
height: 100px;
line-height: 100px;
background: yellow;
float: left;
}
.box2 {
width: 800px;
height: auto;
background: blue;
}
</style>
<body>
<div class="container">
<div class="box1">快来围绕我吧</div>
<div class="box2">环绕文本太长已省略...</div>
</div>
</body>
两栏布局
<style>
body {
background: gray;
margin: 0;
padding: 0;
height: 100vh;
}
.box1 {
float: left;
width: 200px;
height: 100%;
background: darkcyan
}
.box2 {
margin-left: 200px;
height: 100%;
background: blue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
三栏布局
<style>
body {
background: gray;
margin: 0;
padding: 0;
height: 100vh;
}
.box1 {
float: left;
width: 200px;
height: 100%;
background: darkcyan
}
.box2 {
margin: 0 200px;
height: 100%;
background: blue;
}
.box3 {
float: right;
width: 200px;
height: 100%;
background: yellow;
}
</style>
<body>
<div class="box1"></div>
<div class="box3"></div>
<div class="box2"></div>
</body>
