已经很少使用， 被 Flexbox 和 CSS 网格替代。
浮动布局就像绝对布局一样，脱离默认的文档流，会让文字显示的位置围绕该元素（但实际起点还是跳过了元素）：
.author-image {
float: left;
}
而如果对文字也加入float流，那么其位置就会从图片后开始。
如果一个元素更改为float，那么在页面实际上相对于默认布局是被移除了，即其父元素没有该内容，一定程度上会导致原容器的高度宽度变小。这被称为高度折叠。
可以通过设置 clearfix hack 解决，即在父元素上设置一个额外的类，然后在css中：
.clearfix::after {
clear: both;
content:"";
display:block;
}这样就可以实现清除float流还保留布局。