漂浮 本质上是“浮动”

最新推荐文章于 2025-12-22 19:02:04 发布
翻译 最新推荐文章于 2025-12-22 19:02:04 发布 · 61 阅读 · 0
文章标签：

#前端 #html

本文探讨CSS浮动的原理，它如何创建BFC并影响子元素布局。浮动使元素脱离文档流，形成独立的块级容器，同时揭示了其对周围元素及父级容器的具体影响。

漂浮

  • 本质上是“浮动”
  • 分离文档流
  • 不剥离文本流
  • 位置倾向上，并左或右

对自己的影响

  • 形成“块”(BFC)
  • 这个块会负责自己的布局，宽高由自己决定

比如说span中用float span这个就形成了一个BFC，就可以设置宽高了

对元素兄弟的影响

  • 上面一般贴非 float 元素
  • 靠边贴 float 元素或边
  • 不影响其他块级元素位置
  • 其他影响块等级元素文本

对父级元素的影响

  • 从布局上“消失”
  • 深度深度
黑帽白客
关注
MATLAB - 浮动基座机器人的逆运动学
机器人控制与仿真应用
10-08 2278
本例演示如何解决以浮动底座为模型的机器人的逆运动学问题。浮动底座机器人可以在空间中自由平移和旋转，具有六个自由度。浮动基座机器人的逆运动学问题适用于空间应用，即使用安装在浮动和致动基座上的机械臂在空间操纵物体，也适用于躯干和腿部可在空间自由移动的行走机器人。请注意，刚体树对象表示具有固定基体的刚体树。这意味着刚体树的基体在世界中具有固定的位置和方向。您可以在基体上附加一个 “浮动 ”类型的刚体关节，为具有浮动基体的机器人建模，以用于动态模拟等某些应用。
CSS之浮动/BFC/清除浮动（十二）
全粘小谭的博客
10-06 521
该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。
CSS 浮动
m0_68259809的博客
07-08 2521
本文主要介绍CSS浮动及PS切图相关知识。
CSS浮动
2301_80761370的博客
04-06 1803
概念元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。语法：选择器 { float: 属性值;属性值描述none元素不浮动（默认值left元素向左浮动right元素向右浮动<head><style>* {margin: 0;padding: 0;.box1 {/*元素添加浮动属性之后1.当前元素会脱离标准流的控制，俗称脱标2.脱标以后将自己原来的位置漏给了下方标准流的盒子。
html怎么设置浮动,CSS浮动使用技巧
weixin_35651471的博客
07-16 1180
这次给大家带来CSS浮动使用技巧，CSS浮动使用的注意事项有哪些，下面就是实战案例，一起来看一下。浮动具有以下特性：盖不住的文本浮动元素后面不是块级元素，后面的元素将会和它并排(除非设置了元素的宽度，并且屏幕放不下时将会换行)浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非没有位置了当元素设置定位值为absolute、fixed时，浮动将被忽略float...
CSS——CSS浮动与清除浮动
流楚丶格念的博客
07-02 5303
文章目录浮动普通流(normal flow)浮动(float)什么是浮动？浮动详细内幕特性float 浮 漏 特现在就可以用float实现一些基本页面布局了链接清除浮动为什么要清除浮动清除浮动本质※ 清除浮动的方法1.额外标签法2.父级添加overflow属性方法3.使用after伪元素清除浮动4.使用before和after双伪元素清除浮动 浮动 普通流(normal flow) 这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。 前面我们说过，网页布局的核心，就是用CSS来摆放盒子
CSS系列之浮动
StayAlive1887的博客
07-29 828
浮动的由来：块级元素在一行显示，可以使用属性：display: inline-block；浏览器在解析行内块或行内标签的时候，如果标签换行书写会产生一定的距离。两个div转成 inline-block 的时候，可以并排显示，但会有一定的距离，这个距离是因为写div标签的时候换行写了。
CSS第四天——文字浮动
qq_43527058的博客
09-01 1690
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动
weixin_44000436的博客
09-23 170
找出下面优先级相同的选择器 A. img.thumb:after 0012 　B.[data-job=“frontend”]::first-letter 0011 C. #main::before 0101　　 D. [type=“checkbox”]:checked 0020 　E. ul#shop-list 0101 伪元素，元素 0001 伪类，类 0010 con...
浮动基本知识
Luo3255069063的博客
03-19 521
浮动
html中浮动到固定位置,CSS浮动与定位详细解析
weixin_30278943的博客
06-05 2157
1.文档流文档即一个网页，文档流处在网页的最底层，它表示的是页面中的一个位置，我们所创建的元素默认都处在文档流当中。通过浮动和定位可以脱离文档流。元素在文档流中的特点块元素：1.块元素会在文档流中独占一行，块元素会至上而下排列。2.块元素在文档流中的宽度默认值为auto(自动)，即为父元素的100%。3.块元素在文档流中的高度默认为内容高度，即被内容撑开，没有内容就为0，有内容的话，内容多少它就多...
CSS_浮动_常见网页布局_综合网页案例（强烈建议手码代码）
2301_80636070的博客
10-26 1844
目录今日目标：1. 浮动（float)1.1 传统网页布局的三种方式1.2 标准流（普通流/文档流）1.3 为什么需要浮动？1.4 什么是浮动？1.5 浮动特性（重难点）1.6 浮动元素经常和标准流父级搭配使用2. 常见网页布局2.1 常见网页布局2.2 浮动布局注意点1. 浮动和标准流的父盒子搭配。2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。3. 清除浮动3.1 为什么需要清除浮动？3.2 清除浮动本质3.3 清除浮动1.清除浮动 —— 额外标签法2.清除浮动 —— 父级添加 overflow3
JS实现网页漂浮广告效果源码
这种动态位移的过程本质上是对元素`style`属性的持续修改，属于典型的DOM操作范畴。 再者，为了增强用户体验，现代漂浮广告往往具备交互功能。比如点击关闭按钮后隐藏广告、鼠标悬停时暂停移动、随页面滚动自动调整...
vue + iview + vue-i18n中英翻译
最新发布
pingguocu3的博客
12-22 156
)星期一:'mon',星期二:'tue',星期三:'wed',星期四:'thu',星期五:'fri',星期六:'sat',星期日:'sun',©著作权归作者所有,转载或内容合作请联系作者平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
vue2/vue3前端创建脚手架并引入RBAC权限模型
demotang的博客
12-18 221
本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 34--基础知识 9--文件上传功能
我的xiaodoujiao，软件测试人员
12-21 804
Web UI自动化测试学习系列第三十四篇
Java基础 | JSON 处理手册
qq_20236937的博客
12-22 523
Java基础 | JSON 处理手册
万字讲解内网横向渗透vulnstack（七）：红日靶场7实战全流程1-提权Web1/Web2（CVE-2021-3493）
mooyuan的网络安全博客
12-18 1160
本文详细记录了针对红日靶场7的多层渗透测试过程。首先通过外网攻击利用Redis未授权漏洞获取Web1跳板机权限，随后以此为跳板对内网Web2服务器进行渗透，先后利用Laravel漏洞获取初始访问权限、通过环境变量提权获取Docker容器内root权限，最后利用特权模式实现Docker逃逸，成功控制宿主机。整个渗透过程涉及信息收集、漏洞利用、权限提升、容器逃逸等多个环节，展示了从外网到内网的完整攻击链。
【Svelte】怎样实现一个图片上传功能？
纠缠AI的亮子
12-21 297
在 Svelte 中实现这个功能，最优雅的方式是结合使用bind:this（获取 input 引用）和（生成本地预览地址）。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值