CSS Float(浮动)技术文档

CSS的Float属性可以用于将元素从正常的文本流中移动，使其在页面中浮动起来。这个属性常用于实现网页的布局，特别是实现左右两列式的布局比较常见。

基本用法

为了为一个元素开启浮动，我们可以在CSS样式表中为其设置float属性，取值为left或right，如下所示：

.img-box {
  float: left;
}

上述代码将使得类名为"img-box"的元素向左浮动。

清除浮动

由于浮动的元素会脱离正常的文本流，所以如果它的上下文元素没有正确处理，就有可能导致一些布局问题。

例如，如果在一个包含浮动元素的容器中，为后面的元素设置宽度和高度时，可能会导致元素不在正确的位置上。

为了解决这个问题，我们可以在浮动元素的容器中，设置clear属性，来清除浮动元素造成的影响，比如下面的例子：

.container::after {
  content: "";
  display: table;
  clear: both;
}

上述代码中，使用伪元素::after，将float属性设置为none，并设置clear属性为both，来清空所有浮动的元素对于容器的影响。

触发BFC

某些时候，我们想要让元素脱离正常的文本流，但是不想使用浮动。这时我们可以使用BFC（块格式化上下文）来达到这个效果。

通过为元素设置overflow、display、position属性，可以使得其成为BFC，为了消除浮动元素的影响，我们也可以使用BFC，例如：

.container {
  overflow: hidden;
}

上述代码中，我们为类名为"container"的元素设置overflow为hidden，使其成为BFC。

总结

浮动是CSS中常用的一种布局方式，可以让元素在一定程度上脱离文档流，实现复杂的页面布局。但是需要注意清除其对于上下文元素的影响，可以使用clear属性或BFC来达到这个目的。另外在使用浮动时也需要考虑兼容性。