标准文档流
概念：在页面布局过程中，元素默认按照从上到下，从做到右，块级元素独占一行，行级元素共享一行的排列规则
脱离文档流
概念：在页面布局过程中，元素不再遵循标准文档流的规范进行排列，有自己的排列规范，就称为脱离文档流。
float: left | right | none;
特点：
浮动元素可以同行显示，排列不下时会自动换行显示，不存在兼容性问题
浮动元素会脱离文档流，放在标准文档之上【只要设置了浮动，当前这个元素会脱离文档流，不再遵循标准文档流的规则进行排列】
原来的空间不再占用
行级设置浮动后，行级元素是支持宽高
注意：
只有设置了浮动的元素才可以同行显示
多个元素同时设置浮动时，后面浮动的元素会找到前面浮动元素的边界或找到第一个元素找到父元素的边界就停止。
早期浮动用于实现图文混排的，浮动元素会挤开后面非浮动元素的文本。
块级元素设置浮动后，如果不设置宽度时，宽度由内容决定
浮动布局遇到的问题
一般在开发中会遇到高度由内容决定，一旦设置浮动，浮动元素会脱离文档流，造成浮动元素不会参与父元素高度的计算
解决方案：
给父元素设置高度，不能让高度根据内容自动计算
给父元素设置overflow:hidden;：让盒子变成一个BFC盒子，可以让浮动元素参与父元素高度的计算
清除浮动元素的影响
语法 clear:left | right | both；
清除浮动的方法
在浮动元素后添加空白的div设置clear可以清除浮动
在父标签上添加伪元素选择器来清除浮动
.clearfix::after{
content: "";
display: block;
clear: both;
}
