CSS 浮动与清除浮动详解

最新推荐文章于 2025-08-20 09:55:18 发布

原创最新推荐文章于 2025-08-20 09:55:18 发布 · 173 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

浮动(Float)

浮动是CSS中一种传统的布局方式，最初用于实现文字环绕图片的效果，后来被广泛用于网页布局。

基本语法

.element {
  float: left | right | none | inherit;
}

浮动特性

浮动元素会脱离正常文档流，向指定方向移动直到碰到包含框或另一个浮动元素
浮动元素后面的非浮动内容会环绕它
浮动元素会变成块级元素(可以设置宽高)

浮动示例

<div class="container">
  <div class="box left">左浮动</div>
  <div class="box right">右浮动</div>
  <p>这里是环绕文字内容...</p>
</div>

.box {
  width: 100px;
  height: 100px;
}
.left {
  float: left;
  background: red;
}
.right {
  float: right;
  background: blue;
}

清除浮动(Clear)

当元素浮动后，其父容器高度会"坍塌"(高度为0)，这时需要使用清除浮动技术。

clear属性

.clear-element {
  clear: left | right | both | none;
}

清除浮动的方法

1. 空div清除法

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

2. 使用伪元素清除(推荐)

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

3. 父元素设置overflow

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

4. 父元素浮动

.container {
  float: left; /* 或 right */
  width: 100%;
}

5. 使用display: flow-root(现代方式)

.container {
  display: flow-root;
}

浮动布局的现代替代方案

虽然浮动曾经是布局的主要方式，但现在有更好的替代方案：

Flexbox布局 - 适合一维布局
Grid布局 - 适合二维布局
inline-block - 简单的水平排列

实际应用示例

<div class="clearfix">
  <div class="float-left">左浮动内容</div>
  <div class="float-right">右浮动内容</div>
</div>

.float-left {
  float: left;
  width: 40%;
}
.float-right {
  float: right;
  width: 40%;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

浮动布局在响应式设计中仍有其用途，但现代CSS布局技术(Flexbox/Grid)通常能提供更简单、更强大的解决方案。