关于清除浮动｜Trekerz's blog

一、css浮动的概念

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。

当父元素框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

.clearfix:after{
  display: block;
  content: '';
  clear: both;
  height: 0;
}

.clearfix{
  zoom:1
}

概念
BFC（Block Formatting Context）是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。
如何触发
- float除none外
- position 为absolute或fix
- display为inline-blocks、table-cells、table-captions
- overflow除visible外
BFC中的盒子对齐
所有属于同一个BFC的盒子都左对齐（左至右的格式），他们的左外边框紧贴着包含块的左边框。
BFC导致的外边距折叠
使用BFC来防止外边距折叠
毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生。如果他们属于不同的BFC，他们之间的外边距将不会折叠。所以通过创建一个新的BFC我们可以防止外边距折叠。
使用BFC来包含浮动（解决高度塌陷问题）
使用BFC来防止文字环绕
在多列布局中使用BFC
在多列布局中，如果我们在一个列内建立了一个新的BFC，它将会在前一列填充完之后的后面占据所剩余的空间，而不是被挤到下一行。

参考资料：

–end–