Web前端CSS清除浮动的5种方法

 

在移动端清除浮动布局，常用的5种方法：

1. 使用清除浮动的类；
2. 使用overflow属性；
3. 使用 flex 布局；
4. 使用grid 布局；
5. 使用 table 布局。

根据实际情况选择适合的方法，需要注意兼容性和语义性问题。在移动端，清除浮动布局的方法与在桌面端是相同的。可以使用清除浮动的技巧：

1、使用清除浮动的类：

在 CSS 中定义一个清除浮动的类，然后在需要清除浮动的元素上添加该类。例如：

phpCopy code.clearfix:after {  content: "";  display: table;  clear: both;}
<div class="clearfix">  <!-- 需要清除浮动的内容 --></div>

2、使用 overflow 属性：

给浮动元素的父元素添加 overflow 属性。例如：

phpCopy code.parent {  overflow: hidden;}
<div class="parent">  <!-- 浮动元素 --></div>

3、使用 flex 布局：

使用 flex 布局可以避免浮动带来的问题。例如：

phpCopy code.parent {  display: flex;}
<div class="parent">  <!-- 子元素自动排列，无需浮动 --></div>

以上方法都可以在移动端使用，根据实际情况选择适合的方法。

4、使用 grid 布局：

类似于 flex 布局，使用 grid 布局也可以避免浮动带来的问题。例如：

phpCopy code.parent {  display: grid;}
<div class="parent">  <!-- 子元素自动排列，无需浮动 --></div>

5、使用 table 布局：

虽然不太常用，但使用 table 布局也可以避免浮动带来的问题。例如：

phpCopy code.parent {  display: table;}
<div class="parent">  <!-- 子元素自动排列，无需浮动 --></div>

需要注意的是，使用 table 布局可能会影响语义，因此不建议频繁使用。另外，在使用 grid 和 table 布局时，需要注意兼容性问题。如果对你有帮助记得点赞支持！如果你正在学前端，想要全面学习html\CSS，我们这边有一套免费的三十天挑战计划的课程体系，包含了html+css+云端部署的课程体系，可以通过钉钉群里学习，有问题在群里可以提问，同时每节课还安排有作业，配套有阶段项目练习和综合项目实战，目的是帮助大家夯实前端基础，轻松入门到前端行业。

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

点击链接进入参与学习 30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程。