概念：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另一个浮动元素为止
元素浮动以后就会脱离正常的文档流，所以文档的普通流中的框就变得好像浮动元素不存在一样
浮动布局的优点：
在图片混排的时候可以很好的使文字环绕在图片周围
当元素浮动起来后，它可以同块级元素一样设置 宽高
浮动布局的缺点：
元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷
清楚浮动的方法：
1.添加额外的标签，并添加clear属性 或 也可以添加一个<br>标签
<div class="parent"><div style="clear: both"></div>
2.父级添加overflow属性，或者设置高度
<div class="parent" style="overflow:hidden"><div class="f"></div></div>
3.建立伪类选择器清楚浮动
.parent: after {
content: ' ';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
<div class="parent"> <div class="f"></div> </div>
标签：浮动,布局,父级,元素,添加,文档 From： https://www.cnblogs.com/felix-felix/p/17086102.html