CSS浮动

浮动（float）让元素脱离文档流，向左或向右移动，常用于多列布局和文字环绕效果。

基本语法

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

基本特性

典型应用

文字环绕图片

.article img {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

多列布局

.container {
  width: 100%;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}

导航栏

.nav {
  list-style: none;
}

.nav li {
  float: left;
  margin-right: 20px;
}

清除浮动

浮动会导致父容器高度塌陷，需要清除：

方法一：clear 属性

.clearfix {
  clear: both; /* 清除两侧浮动 */
}

<div class="container">
  <div class="float-left">浮动元素</div>
  <div style="clear: both;"></div>
</div>

方法二：伪元素（推荐）

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

<div class="container clearfix">
  <div class="float-left">浮动元素</div>
</div>

方法三：overflow

.container {
  overflow: hidden; /* 或 auto */
}

注意：现代布局推荐使用 Flexbox 或 Grid，浮动主要用于文字环绕场景。

浮动与清除对比

要点总结

• 浮动使元素脱离文档流，实现文字环绕和多列布局
• 必须处理父容器高度塌陷问题
• 推荐使用伪元素 ::after + clear: both 清除浮动
• 现代布局优先使用 Flexbox 和 Grid