floating浮动的设计初衷1.浮动可以将一个元素（通常是图片）拉到其容器的一侧，从而使文档流包围它（如下图）。这种布局在报刊杂志中很常见，所以CSS加入了浮动来实现这种效果。一行文本围绕着一个浮动元素2.浮动元素被移出正常的文档流并被拉到容器的边缘。文档流重新排列，但它环绕着浮动元素此刻占据的空间。如果让多个元素漂浮到同一边，它们会并排排列，两个漂浮的元素会紧挨着排列。注意事项1.移动元素不同于普通的文档流元素，其高度不会添加到父元素上2.浮动是实现文本围绕浮动元素排列的效果。在段落中浮动图像时，段落的高度不会增加以容纳图像。也就是说，如果图片比段落文字高，则下一段会从上一段文字的正下方开始，两段都围绕浮动图片排列（下图1）3.三左浮动boxes：如果box1比box2高，box3不会飘到最左边，而是飘到box1的右边（下图2）。所有元素的顶部和底部边距。它们不会对BFC之外的元素造成边缘崩溃。2.包含里面所有的浮动元素。3、不会和BFC外的浮动元素重叠。简而言之，BFC中的内容不会与外部元素重叠或交互。如果给元素加上clear属性，只会清除其所在BFC中的float。如果强制为某个元素生成新的BFC，则它不会与其他BFC重叠。创建BFC1。浮动：左或右，不是没有。2.overflow：隐藏，自动或滚动，不可见。3.显示：inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。具有这些属性的元素称为块容器。4.position:absolute或position:fixed。好处1.包含浮动元素2.防止边距塌陷3.防止文档流围绕浮动元素排列
