css浮动

浮动

浮动的设计初衷
1、浮动能将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流就能够包围它（如下图所示）。这种布局在报纸和杂志中很常见，因此CSS增加了浮动来实现这种效果。

文本行包围了浮动元素

2、浮动元素会被移出正常文档流，并被拉到容器边缘。文档流会重新排列，但是它会包围浮动元素此刻所占据的空间。如果让多个元素向同侧浮动，它们就会挨着排列，

两个浮动元素挨着排列

注意点

1. 动元素不同于普通文档流的元素，它们的高度不会加到父元素上
2. 浮动是为了实现文字围绕浮动元素排列的效果。在段落里浮动图片时，段落的高度并不会增长到能够容纳该图片。也就是说，如果图片比段落文字高，下一段会直接从上一段的文字下面开始，两段文字都会围绕浮动的图片排列（下图1）
3.  三个左浮动的盒子：如果盒子1比盒子2高，则盒子3不会浮动到最左边，而是浮动到盒子1的右边（下图2）

下图1

下图2

块级格式化上下文（blockformatting context, BFC）

特点

1. 包含了内部所有元素的上下外边距。它们不会跟BFC外面的元素产生外边距折叠。
2. 包含了内部所有的浮动元素。
3. 不会跟BFC外面的浮动元素重叠。

简而言之，BFC里的内容不会跟外部的元素重叠或者相互影响。如果给元素增加clear属性，它只会清除自身所在BFC内的浮动。如果强制给一个元素生成一个新的BFC，它不会跟其他BFC重叠。

创建BFC

1. float: left或right，不为none即可。
2. overflow:hidden、auto或scroll，不为visible即可。
3. display:inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。拥有这些属性的元素称为块级容器（block container）。
4. position:absolute或position: fixed。

好处

1. 包含浮动元素
2. 防止外边距折叠
3. 防止文档流围绕浮动元素排列