关于清除浮动的细节

最新推荐文章于 2024-07-19 15:13:24 发布
最新推荐文章于 2024-07-19 15:13:24 发布
阅读量73 收藏
点赞数
文章标签： javascript css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/susuxhsji/article/details/115825616
版权

清除浮动

今天在做项目时，使用清除浮动时，遇到了一个问题；我先用额外标签法清除浮动，但没有效果，然后又用了双伪元素法清除浮动，但依旧没有效果。可这个方法之前用就有效果，现在却不行。
我查了一下，发现是因为我想要清除浮动的元素使用的不是clearfix类名

使用的re类名
使用.re类名的结果

然后我又试着用clearfix类名竟然真的成功了

使用clearfix
在这里插入图片描述

那么为什么之前没用clearfix作为类名却能成功呢？

在这里插入图片描述

susuxhsji
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html清除浮动详解,css使用伪元素来清除浮动 (clearfix使用讲解）
weixin_35696321的博客
06-11 834
clearfix进化史首先在很多很多年以前我们常用的清除浮动是这样的。现在可能还可以在很多老的站点上可以看到这样的代码，相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤，就是每次清除浮动的时候都需要增加一个空标签来使用。这种做法如果在页面复杂的布局要经常清除浮动的时候就会产生很多的空标签，增加了页面无用标签，不利于页面优化。但是我发现大型网站中 居然还在使用这种清除浮动的方法。有兴趣的同学可...
CSS清除浮动（1）
DBA_Benjamin的博客
03-20 169
CSS清除浮动 在对页面布局时，我们经常会用到‘浮动’这一属性也就是float，浮动又分为左浮动与右浮动对应属性值为‘left’与’right’，它在页面中得表现是什么样子的呢？我们先看一下没有浮动属性得代码与Web界面 <head> <style> #father{ width: 500px; height: 300px; background-color: #ccc;
浮动细节
m0_71428015的博客
10-16 76
用一个大的div盒子来装小的。想要父盒子根据里面内容自动生成高度,但是父盒子里的子盒子浮动完之后,父级盒子就没有高度了,影响下面的布局。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。网页中多个块元素纵向排列用标准流,多个块元素横向排列用。注意:多出的盒子会在下一行展开。
Web前端CSS清除浮动的5种方法
艾编程带你学前端博客
02-15 1661
根据实际情况选择适合的方法，需要注意兼容性和语义性问题。在移动端，清除浮动布局的方法与在桌面端是相同的。
W3标准不变 清除浮动实现代码
01-21
抱怨归抱怨，饭还得吃，钱还得挣，清除浮动就不能停止。 为了清除浮动增加无语义代码已经是最稳定和简单的方式，但总叫开发者心里感到不舒服，毕竟这么多年来早已习惯了结构和样式的分离，非要在结构中插入这样一行...
网页前端开发小细节
09-22
通常推荐使用垂直对齐属性，因为它避免了浮动后清除浮动所带来的额外代码负担。 6. **等高布局与IE6问题**：在IE6中，设定高度的div可能会被内部内容撑开，而其他浏览器则不会。为解决此问题，可以给div添加 `...
表单输入框浮动标签jQuery特效代码.zip
07-11
在网页设计中，表单是收集用户数据的重要组成部分，而良好的用户体验往往体现在细节之中。"表单输入框浮动标签jQuery特效代码"就是一种提升表单交互体验的实用技术。这个压缩包提供了一种jQuery实现的特效，使得...
JS文字打散随机浮动效果代码.zip
07-04
JavaScript（简称JS）是一种轻量级的脚本语言，...通过调整代码，可以自定义浮动速度、范围以及其他视觉细节，以适应不同的设计需求。对于开发者来说，这是一个学习JS动画和事件处理的实例，有助于提升技能和创新思维。
android系统自动浮动查询框的使用
04-01
此外，可能还需要一个`ImageView`作为清除按钮，以及一些自定义样式来实现浮动效果。 ```xml android:id="@+id/search_box" android:layout_width="match_parent" android:layout_height="wrap_content" ...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1022
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 256
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 1021
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 178
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 816
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
vue3配置代理
Joe world的博客
07-16 170
【代码】vue3配置代理。
Vue2中的v-model的表单元素绑定
m0_56698546的博客
07-16 278
常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值。它会根据控件的类型自动选择正确的方法来更新元素。
vue3 vxe-grid查询有返回数据，但是不显示的问题解决
jwbabc的专栏
07-18 301
vxe-grid，方法是调用了，也有返回结果，但是就是不显示的解决。
轮播图变成响应式数据
最新发布
罗铠威的博客
07-19 97
本篇博客主要记录轮播图变成响应式数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值