css浮动

浮动

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

文本行包围了浮动元素flex

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

两个浮动元素挨着排列spa

注意点

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

下图1

下图2设计

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

特色

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

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

建立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. 防止文档流围绕浮动元素排列