正在加载...

CSS float 与 clear

Z-index 处理重叠层的堆叠。float 与 clear 解决另一个经典问题：让文字贴着图片或提示框的一侧环绕，并决定下一块何时必须落到这些浮动元素下方。先学会环绕模式——页面网格交给 Flexbox 和 Grid。

float 与 clear 工具箱

📊 float 与 clear 一览

工具	日常作用
`float: left`	把盒子拉到左侧；后续内容可在右侧环绕
`float: right`	把盒子拉到右侧；后续内容可在左侧环绕
`float: none`	默认——无浮动行为
`clear: left`	下一块拒绝挨着左侧浮动
`clear: right`	下一块拒绝挨着右侧浮动
`clear: both`	下一块落到任意一侧浮动下方
Clearfix	父级增高以包住浮动子元素（如 `overflow` 或 `display: flow-root`）

浮动盒子以特殊方式离开正常流：邻居可以在旁边环绕；若父级只含浮动子元素，高度可能塌成零。正因这种塌陷，才需要 clearfix。

浮动图片，让故事环绕

把插图拉到左侧，让段落在旁流动。给图片设宽度，让环绕看起来是刻意的，而不是偶然。

图片 float left

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

把提示框浮动到另一侧

短提示或引用可以靠右，正文在左侧环绕。留好外边距，别让文字贴着盒子。

提示 float right

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

clear——别再贴着 float

当标题、页脚或下一节必须从浮动下方的新行开始时，使用 clear。日常里 clear: both 就是「掉到所有浮动下面」。

浮动后的 clear both

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

塌陷的父级需要 clearfix

若父级只包着浮动子元素，高度可能塌陷，背景/边框看起来坏了。平静的修法：在父级上用 overflow: auto（或 hidden）——或现代写法 display: flow-root。

overflow clearfix

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root——清晰的包含块

display: flow-root 会新建块级格式化上下文，让父级包含其浮动，而不借用 overflow 的副作用。

flow-root clearfix

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

平静的 float 习惯

用 float 做文字环绕媒体和小环绕技巧。导航、页面分栏和卡片网格优先 Flexbox 或 Grid。记住：position 定位；z-index 分层；float 环绕。

媒体加文案模式

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

自己动手

在段落较多的文章里把图片左浮动，并微调外边距。
把提示框右浮动，让正文在旁环绕。
给贴着浮动爬上来的页脚加上 clear: both。
用 overflow: auto 或 display: flow-root 修好塌陷父级。
写一句话：什么时候选 Flex 而不是 float？

常见错误

用 float 搭整页布局，而不是 Flex/Grid
忘记 clear，页脚爬到图片旁边
忽略浮动子元素周围塌陷的父级
把 float 当成 position 或 z-index
本意是下一块，却只在浮动盒子上写 clear

小结

float 把盒子拉到一侧，让后续内容可以环绕
clear 迫使后面的块落到浮动下方
只有浮动的父级可能塌陷——用 overflow 或 flow-root 做 clearfix
环绕模式用 float；页面结构用 Flex/Grid
定位与堆叠仍用各自的工具（position、z-index）

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言