CSS 浮动

网站

CSS float 属性

float | MDN

引入

浮动最早常用于实现文字环绕图片，后来也被大量用于页面布局。

现在整体布局更推荐使用 flex 和 grid，但理解浮动仍然有助于阅读旧代码和处理一些特殊效果。

正文

定义

定义

CSS 浮动通过 float 让元素向左或向右移动，并让后面的内容围绕它排列。

浮动会影响元素原本在文档流中的排列方式。

它常和 clear、清除浮动技巧一起出现。

基础语法

.box {
  float: left;
}

常见值：

值	作用
none	默认值，不浮动
left	元素向左浮动
right	元素向右浮动

设置浮动 float

<img class="thumb" src="image.jpg" alt="示例图片">
<p>这是一段文字，会围绕浮动图片排列。</p>

.thumb {
  float: left;
  width: 120px;
  margin-right: 16px;
}

这里图片会浮动到左侧，后面的文字会围绕图片显示。

这是 float 最经典的使用场景。

左浮动和右浮动

.left-box {
  float: left;
}
 
.right-box {
  float: right;
}

float: left; 会让元素尽量靠左排列。

float: right; 会让元素尽量靠右排列。

多个浮动元素会在同一行中依次排列，空间不够时会换行。

清除浮动 clear

clear 用来控制元素旁边不能出现浮动元素。

.footer {
  clear: both;
}

常见值：

值	作用
none	默认值，允许旁边有浮动元素
left	左侧不能有浮动元素
right	右侧不能有浮动元素
both	左右两侧都不能有浮动元素

父元素高度塌陷

浮动元素会脱离普通文档流的一部分影响。

如果父元素里面只有浮动子元素，父元素可能撑不起高度。

<div class="container">
  <div class="item">左</div>
  <div class="item">右</div>
</div>

.item {
  float: left;
  width: 50%;
}

这时 .container 可能没有正常包住两个 .item 的高度。

这种情况通常叫做父元素高度塌陷。

清除浮动方法

常见做法是使用伪元素清除浮动。

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

使用时把 clearfix 加到父元素上。

<div class="container clearfix">
  <div class="item">左</div>
  <div class="item">右</div>
</div>

这样父元素就能正常包含内部浮动元素。

例子

图片文字环绕

<article>
  <img class="cover" src="cover.jpg" alt="文章封面">
  <p>这里是一段文章内容，文字会围绕图片排列。</p>
</article>

.cover {
  float: left;
  width: 160px;
  margin-right: 16px;
  margin-bottom: 8px;
}

两列浮动布局

<div class="layout clearfix">
  <aside class="sidebar">侧边栏</aside>
  <main class="content">主要内容</main>
</div>

.sidebar {
  float: left;
  width: 200px;
}
 
.content {
  margin-left: 220px;
}
 
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

这种写法在旧页面中很常见。

新项目中，如果只是做布局，通常更推荐 display: flex;。

特点

• float 可以让元素向左或向右浮动
• 后面的文本内容会围绕浮动元素排列
• 浮动元素可能导致父元素高度塌陷
• clear 用来清除浮动影响
• 清除浮动常用 .clearfix::after
• 现代整体布局更推荐 flex 和 grid

注意事项

• 不要优先用浮动做复杂页面布局
• 使用浮动后，要注意父元素高度是否正常
• 如果下面的内容被浮动影响，可以使用 clear: both;
• 图片文字环绕仍然是 float 很合适的场景

理解

可以把浮动理解为：把元素从正常队伍中拉到左边或右边，让后面的内容绕着它走。

它以前常被当成布局工具，现在更多用于理解旧代码和实现文字环绕效果。

遇到浮动时，最需要注意的是清除浮动和父元素高度问题。

引出

理解浮动后，可以继续学习 CSS BFC 和 IFC，因为 BFC 经常和清除浮动、阻止外边距合并有关。