以下从浮动到BFC的段落 摘自MDN 网络开发者

float 浮动

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

一个浮动元素是float的值不为none的元素。

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

由于float意味着使用块布局，它在某些情况下修改display 值的计算值：

指定值	计算值
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex, 但是float对这样的元素不起作用
inline-flex	inline-flex, 但是float对这样的元素不起作用
other	unchanged

备注：如果要在 java script 中把float属性当作element.style对象的一个成员来操作，那么在Firefox 34 和更老的版本中，你必须拼写成cssFloat。另外还要注意到在 Internet Explorer 8 和更老的IE当中，要使用styleFloat属性。这是DOM驼峰命名和CSS所用的连字符分隔命名法对应关系中的一个特例（这是因为在 java script 中"float"是一个保留字，因为同样的原因，"class"被改成了"className" 、"for"被改成了"htmlFor"）。

语法

float 属性的值被指定为单一的关键字，值从下面的值列表中选择。

值

left

表明元素必须浮动在其所在的块容器左侧的关键字。

right

表明元素必须浮动在其所在的块容器右侧的关键字。

none

表明元素不进行浮动的关键字。

inline-start

关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。

inline-end

关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

形式化语法

left | right | none | inline-start | inline-end

例子

<style type="text/css">
  div { border: solid red;  max-width: 70ex; }
  h4  { float: left;  margin: 0; }
</style>

<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
</div>

浮动元素是如何定位的

正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。

清除浮动

在前面的例子当中，浮动的元素的高度比它们所在的容器元素（是块元素）的高度小。然而如果块元素内的文本太短，不足以把块元素的大小撑到高度大于所有浮动元素的高度，我们可能会看到意想不到的效果。例如，如果上面图片中的文字只有"Lorem ipsum dolor sit amet,"，并且接下来是另外一个和"Floats Example"这个标题一样风格的标题元素，那么第二个标题元素会出现在红色的正方形之间。然而在大多数这种情况下，我们希望这个标题元素是靠左对齐的。为了实现这个效果，我们需要清除浮动。

这个例子中，最简单的清除浮动方式就是给我们想要确保左对齐的新标题元素添加clear属性：

h2.secondHeading { clear: both; }

然而这个方法只是在同一块级格式化上下文（block formatting context）中没有其他元素的时候才是有效的。如果我们的 H2 有兄弟元素是向左浮动和向右浮动的边栏，那么使用clear 会导致这个标题元素出现在边栏的下方，这显然不是我们期望的结果。

如果不能使用清除浮动，另一种做法是浮动容器的限制块级格式化上下文。再次列举上面的例子，有三个红色的正方形和一个P元素。我们可以设置P元素的overflow属性值变成hidden或者auto，因为这样可以让容器元素伸展到能够包含红色正方形，而不是让他们超出块元素的底部。

p.withRedBoxes { overflow: hidden; height: auto; }

Note: 设置overflow为scroll 也可以让块元素撑大来包含所有的浮动子元素，但是这样不论内容有多少都会显示出一个滚动条。即使 height 默认值为 auto，我们还是设置了，是为了表明容器应该增大高度以便包裹住里面的内容。

clear 清除浮动

clear CSS 属性指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 在它的下面。clear 属性适用于浮动和非浮动元素。

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

clear: inherit;

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致margin collapsing不起作用。

当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

要被清除的相关浮动元素指 在相同块级格式化上下文中的前置浮动。

注释:如果你想要一个元素将所有浮动元素包含在内，你既可以将这个容器设置为浮动，又可以通过 ::