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

】

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

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

浮动的特性：

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

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

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

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

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

浮动在文档流中的影响：

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

如果把上面这段定义中的浮动元素换为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浮动的深入研究、详解及拓展

作者：自娱自楽
链接：https://www.jianshu.com/p/be1526916193
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

如果这篇文章对你有帮助，并且使你对修真院免费在线学习感兴趣，可以通过我的邀请链接进行注册，这样可以在日后为你的线下学习减免学费。

邀请码：23246304

更多内容，可以加入IT交流群565734203与大家一起讨论交流

这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地