CSS新手入门笔记整理:CSS清除浮动的方法

  • 浮动可以让我们灵活地布局,但是也会带来一定的副作用。 父元素高度塌陷,从而导致边框不能撑开,背景色无法显示。 页面布局错乱。
  • 清除浮动,其实就是清除元素被定义浮动之后带来的脱离文档流的影响。浮动可以使元素移到左边或者右边,然后后面的文字或元素会环绕着这个浮动元素。如果不想浮动元素后面的元素环绕着它,希望后面的元素回归到正常文档流中去,这个时候我们可以清除浮动。

clear:both

语法

复制代码
元素{clear:both;}

|---------|-------------|
| 属性值 | 说明 |
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 同时清除左浮动和右浮动 |

clear 属性不是应用于浮动元素本身,而是应用于浮动元素后面的元素。

使用 clear:both 来清除浮动,往往会多添加一个 div 标签。这个 div 标签仅仅是为了清除浮动而添加的,没有任何其他意义。但它会增加多余的标签,还会破坏 HTML 代码的语义。


overflow:hidden

语法

复制代码
父元素{overflow:hidden;}
子元素{float:left;}

overflow:hidden 应用于浮动元素的父元素,而不是当前的浮动元素。

但它会隐藏超出父元素的内容部 分,有时候这并不是我们预期的效果。


::after 伪元素

::after 伪元素结合 clear:both 来清除浮动。

语法

复制代码
.clearfix{*zoom:1;}
.clearfix::after
{
 clear:both;
 content:"";
 display:block;
 height:0;
 visibility:hidden;
}

定义成一个公共的 class,这个 class 一般取名为".clearfix"然后对这个类进行全局引用,这样可以减少重复的 CSS 代码。(*zoom:1; 用于解决 IE6、IE7 的浮动问题。)


使用 clear:both 清除浮动会增加多余的标签,使用 overflow:hidden 清除浮动会使超出父元素的部分被隐藏。使用 ::after 伪元素来清除浮动,则不会有这些缺点。在实际开发中,更倾向::after 伪元素于使用方法。


相关推荐
LoveDreaMing几秒前
微前端-无界的实操和源码分析
前端·javascript·架构
去伪存真23 分钟前
「实测可行」Tailwind CSS 4 与 UnoCSS 最新配置全攻略:一把跑通不踩坑
前端
十八朵郁金香25 分钟前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
人工智能的苟富贵27 分钟前
使用 Tauri + Rust 构建跨平台桌面应用:前端技术的新边界
开发语言·前端·rust·electron
拉不动的猪35 分钟前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
小p1 小时前
react学习2:react中常用的hooks
前端·react.js
南清的coding日记1 小时前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
Xiaouuuuua1 小时前
2026年计算机毕业设计项目合集
前端·vue.js·课程设计
IT_陈寒1 小时前
React 18并发模式实战:3个优化技巧让你的应用性能提升50%
前端·人工智能·后端
用户761736354011 小时前
CSS重点知识-样式计算
前端