当前位置: 首页 > news >正文

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

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

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

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

1、使用清除浮动的类:

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

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

2、使用 overflow 属性:

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

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

3、使用 flex 布局:

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


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

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

4、使用 grid 布局:

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

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

5、使用 table 布局:

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


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老师的博客-艾编程。

相关文章:

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

在移动端清除浮动布局&#xff0c;常用的5种方法&#xff1a; 使用清除浮动的类&#xff1b;使用overflow属性&#xff1b;使用 flex 布局&#xff1b;使用grid 布局&#xff1b;使用 table 布局。 根据实际情况选择适合的方法&#xff0c;需要注意兼容性和语义性问题。在移动…...

Java:博客系统,实现加盐加密,分页,草稿箱,定时发布

文章目录1. 项目概述2. 准备工作2.1 数据库表格代码2.2 前端代码2.3 配置文件3. 准备项目结构3.1 拷贝前端模板3.2 定义实体类3.3 定义mapper接口和 xml 文件3.4 创建其他包4. 统一数据返回4.1 Result 类4.2 统一数据格式5. 注册5.1 逻辑5.2 验证数据规范性5.3 实现注册5.4 前端…...

JuiceFS 在火山引擎边缘计算的应用实践

火山引擎边缘云是以云计算基础技术和边缘异构算力结合网络为基础&#xff0c;构建在边缘大规模基础设施之上的云计算服务&#xff0c;形成以边缘位置的计算、网络、存储、安全、智能为核心能力的新一代分布式云计算解决方案。边缘存储主要面向适配边缘计算的典型业务场景&#…...

实验06 二叉树遍历及应用2022

A. 【程序填空】二叉树三种遍历题目描述给定一颗二叉树的特定先序遍历结果&#xff0c;空树用字符‘0’表示&#xff0c;例如AB0C00D00表示如下图请完成以下程序填空&#xff0c;建立该二叉树的二叉链式存储结构&#xff0c;并输出该二叉树的先序遍历、中序遍历和后序遍历结果输…...

基于蜣螂算法改进的LSTM分类算法-附代码

基于蜣螂算法改进的LSTM分类算法 文章目录基于蜣螂算法改进的LSTM分类算法1.数据集2.LSTM模型3.基于蜣螂算法优化的RF4.测试结果5.Matlab代码摘要&#xff1a;为了提高LSTM数据的分类预测准确率&#xff0c;对LSTM中的参数利用蜣螂搜索算法进行优化。1.数据集 数据的来源是 UC…...

如何正确应用GNU GPLv3 和 LGPLv3 协议

文章目录前言GNU GPLv3.0Permissions(许可)Conditions(条件)Limitations(限制)GNU LGPLv3.0应用GPLv3.0应用LGPLv3.0建议的内容&#xff1a;添加文件头声明附录GNU GPLv3.0原文GNU LGPLv3.0 原文前言 对于了解开源的朋友们&#xff0c;GNU GPL系列协议可谓是老朋友了。原来我基…...

Python局部函数及用法(包含nonlocal关键字)

Python 函数内部可以定义变量&#xff0c;这样就产生了局部变量&#xff0c;可能有人会问&#xff0c;Python 函数内部能定义函数吗&#xff1f;答案是肯定的。Python 支持在函数内部定义函数&#xff0c;此类函数又称为局部函数。 那么&#xff0c;局部函数有哪些特征&#x…...

关于BMS的介绍及应用领域

电池管理系统&#xff08;Battery Management System&#xff0c;BMS&#xff09;是一种集成电路系统&#xff0c;它用于监测和控制电池系统状态&#xff0c;以确保电池的正常运行和安全使用。BMS的应用涵盖了电动汽车、储能系统、无人机、电动工具等各个领域&#xff0c;可以提…...

2月datawhale组队学习:大数据

文章目录一、大数据概述二、 Hadoop2.1 Hadoop概述2.2 su:Authentication failure2.3 使用sudo命令报错xxx is not in the sudoers file. This incident will be reported.2.4 创建用户datawhale&#xff0c;安装java8&#xff1a;2.5 安装单机版Hadoop2.5.1 安装Hadoop2.5.2 修…...

在Spring框架中创建Bean实例的几种方法

我们希望Spring框架帮忙管理Bean实例&#xff0c;以便得到框架所带来的种种功能&#xff0c;例如依赖注入等。将一个类纳入Spring容器管理的方式有几种&#xff0c;它们可以解决在不同场景下创建实例的需求。 XML配置文件声明 <?xml version"1.0" encoding"…...

PyQt5 界面预览工具

简介 一款为了预览PyQt5设计的UI界面而开发的工具&#xff0c;使用时需要结合PyCharm同时使用。 下载 PyQt5界面预览工具 参数说明 使用配置 启动PyCharm&#xff0c;找到File -> Settings&#xff0c;打开 找到Tools -> External Tools点击打开&#xff0c;在新界面…...

day44【代码随想录】动态规划之零钱兑换II、组合总和 Ⅳ、零钱兑换

文章目录前言一、零钱兑换II&#xff08;力扣518&#xff09;二、组合总和 Ⅳ&#xff08;力扣377&#xff09;三、零钱兑换&#xff08;力扣322&#xff09;总结前言 1、零钱兑换II 2、组合总和 Ⅳ 3、零钱兑换 一、零钱兑换II&#xff08;力扣518&#xff09; 给你一个整数…...

计算机网络第1章(概述)学习笔记

❤ 作者主页&#xff1a;欢迎来到我的技术博客&#x1f60e; ❀ 个人介绍&#xff1a;大家好&#xff0c;本人热衷于Java后端开发&#xff0c;欢迎来交流学习哦&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 如果文章对您有帮助&#xff0c;记得关注、点赞、收藏、…...

GPT-3(Language Models are Few-shot Learners)简介

GPT-3(Language Models are Few-shot Learners) 一、GPT-2 1. 网络架构&#xff1a; GPT系列的网络架构是Transformer的Decoder&#xff0c;有关Transformer的Decoder的内容可以看我之前的文章。 简单来说&#xff0c;就是利用Masked multi-head attention来提取文本信息&a…...

容器安全风险and容器逃逸漏洞实践

本文博客地址&#xff1a;https://security.blog.csdn.net/article/details/128966455 一、Docker存在的安全风险 1.1、Docker镜像存在的风险 不安全的第三方组件&#xff1a;用户自己的代码依赖若干开源组件&#xff0c;这些开源组件本身又有着复杂的依赖树&#xff0c;甚至…...

2023年美赛B题-重新想象马赛马拉

背景 肯尼亚的野生动物保护区最初主要是为了保护野生动物和其他自然资源资源。肯尼亚议会于2013年通过了《野生动物保护和管理法》提供更公平的资源共享&#xff0c;并允许替代的、以社区为基础的管理工作[1]。此后&#xff0c;肯尼亚增加了修正案&#xff0c;以解决立法中的空…...

Docker常用命令总结

目录 一、帮助启动类命令 &#xff08;1&#xff09;启动docker &#xff08;2&#xff09;停止docker &#xff08;3&#xff09;重启docker &#xff08;4&#xff09;查看docker &#xff08;5&#xff09;设置开机自启 &#xff08;6&#xff09;查看docker概要信息…...

mac环境,安装NMP遇到的问题

一 背景 项目开发中,公司项目需要使用本地的环境运行,主要是php这块的业务。没有使用docker来处理,重新手动撸了一遍。记录下其中遇到的问题; 二 遇到的问题 2.1 Nginx的问题 brew install nginx后,启动nginx,报错如下:nginx: [emerg] no "ssl_certificate" …...

Web Worker 与 SharedWorker 的介绍和使用

目录一、Web Worker1 Web Worker 是什么2 Web Worker 使用3 简单示例二、SharedWorker2.1 SharedWorker 是什么2.2 SharedWorker 的使用方式2.3 多页面数据共享的例子一、Web Worker 1 Web Worker 是什么 Web Worker是 HTML5 标准的一部分&#xff0c;这一规范定义了一套 API…...

React:Redux和Flux

React,用来构建用户界面,它有三个特点: 作为view,构建上用户界面虚拟DOM,目的就是高性能DOM渲染【diff算法】、组件化、多端同构单向数据流,是一种自上而下的渲染方式。Flux 在一个React应用中,UI部分是由无数个组件嵌套构成的,组件和组件之间就存在层级关系,也就是父…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法 大家好,我是Echo_Wish。最近刷短视频、看直播,有没有发现,越来越多的应用都开始“懂你”了——它们能感知你的情绪,推荐更合适的内容,甚至帮客服识别用户情绪,提升服务体验。这背后,神经网络在悄悄发力,撑起…...

Android屏幕刷新率与FPS(Frames Per Second) 120hz

Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数&#xff0c;单位是赫兹&#xff08;Hz&#xff09;。 60Hz 屏幕&#xff1a;每秒刷新 60 次&#xff0c;每次刷新间隔约 16.67ms 90Hz 屏幕&#xff1a;每秒刷新 90 次&#xff0c;…...