CSS float属性

CSS float属性是控制元素在页面上的浮动位置的一种方式。通过设置元素的float属性，可以让元素向左或向右浮动，使得其他元素可以环绕它。

语法

selector {
  float: left | right | none | inherit;
}

• left：元素向左浮动
• right：元素向右浮动
• none：元素不进行浮动
• inherit：从父元素继承浮动属性

使用场景

float属性通常用于排版多列布局、图像环绕等场景。例如，可以使用float属性实现如下布局效果：

<div class="wrapper">
  <div class="box left"></div>
  <div class="box right"></div>
</div>

.wrapper {
  width: 800px;
  margin: 0 auto;
}

.box {
  width: 380px;
  height: 200px;
  margin: 10px;
}

.left {
  float: left;
  background-color: #f7f7f7;
}

.right {
  float: right;
  background-color: #ebebeb;
}

注意事项

• 设置了float属性的元素会自动变为块级元素。
• 浮动元素会影响周围其他元素的布局，需要注意清除浮动以避免布局错乱。
• 浮动元素会脱离文档流，可能会影响元素间隔塌陷的情况，需要采用合适的清除浮动方法来避免。

清除浮动

为防止浮动元素对其后面的元素产生影响，需要清除它产生的影响。常用的清除浮动的方法有：

• 额外添加一个空的块级元素，分别设置clear属性为left和right。
• 通过父容器使用overflow属性设置为hidden或auto来清除子元素的浮动。
• 通过使用:after伪元素清除浮动，如：

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}