什么是浮动？有哪些清除浮动的方法？

大家好，这里是修真院前端小课堂，今天给大家带来的是

《什么是浮动？有哪些清除浮动的方法？》

浮动 float 出现的本意是用来实现文字像流水一样环绕浮动元素的效果。因为除了这个效果以外，float 属性的其他应用都可以用其他 css 属性来实现。

由于 CSS 是一门相当灵活的语言。某个 CSS 属性被用于的场景，可能会完全违背当初创造该 CSS 属性的本意。就如今天我们要讲的 float，因为可以很简单的实现多列布局而常被当作布局属性使用。

 

---

浮动的特性：

包裹性：浮动属性可以使 block 元素产生类似 inline-block 的状态使其产生包裹内容的效果。

破坏性（欺骗性）：对行内盒 inline-boxs 设置浮动会破坏其所在行盒 line-box 的结构。

这个很好理解，因为浮动元素脱离了文档流，其父元素失去了内容，所以失去了高度。但浮动对其父元素 line-box 结构的影响不止于此。

可以理解为当元素浮动后，就如物体浮出湖面一样，不占距湖底空间，但是在湖底有个投影。而周围的内联元素就像胆小的鱼儿一样被影子欺骗，认为它就在哪里，所以不敢进去，只是围在一边。

浮动元素在脱离文档流的同时还会影响页面中的行内元素

浮动在文档流中的影响：

假如某个 div 元素 A 是浮动的，如果 A 元素上一个元素也是浮动的，那么 A 元素会跟随在上一个元素的后边 (如果一行放不下这两个元素，那么 A 元素会被挤到下一行)；如果 A 元素上一个元素是标准流中的元素，那么 A 的相对垂直位置不会改变，也就是说 A 的顶部总是和上一个元素的底部对齐。

demo

如果把上面这段定义中的浮动元素换为 inline-block 元素，他同样成立，所以说在某些方面 float 元素和 inline-block 元素是相同的。

同为在一行排列，浮动元素就像时打了强化剂的 inline-block，使他能设置排列的方向，但同时会有副作用，如上面讲到的破坏性。

我们一方面要使用他的布局能力，另一方面又不希望他副作用破坏布局，所以在使用 float 的时候，我们还会想办法清除浮动。

---

有哪些清除浮动的方法？

1、使用 clear 

clear : none | left | right | both

2、增加一个清除浮动的子元素

3、用:after 伪元素

4、父元素设置 overflow:hidden

5、父元素也设成 float

6、父元素设置 display:table。

第一种方法只适合相邻浮动元素清除浮动，后面三种是触发了 BFC，推荐使用第三种方法。

什么是 BFC

BFC 就是 “块级格式化上下文” 的意思，创建了 BFC 的元素就是一个独立的盒子，不过只有 Block-level box 可以参与创建 BFC， 它规定了内部的 Block-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

何为格式化上下文，个人理解就是将 BFC 容器进行格式化，使其不受上下元素的影响。

格式化具体指的是什么格式，可以参考 html 基本流，因为 html 本身就是一个 BFC 容器，大致特性如下：

内部的 Box 会在垂直方向，从顶部开始一个接一个地放置。

Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加

每个元素的 margin box 的左边， 与包含块 border box 的左边相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC 的区域不会与 float box 叠加。

BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。 计算 BFC 的高度时，浮动元素也参与计算。

---

参考文献：

CSS float 浮动的深入研究、详解及拓展

CSS 浮动 (float,clear) 通俗讲解

CSS 浮动 float 详解