absolute脱离文档流并相对于最近定位祖先定位，用于精确布局如弹窗；float使元素向侧移动且内容环绕，曾用于多列布局；现推荐Flex/Grid为主，absolute用于局部定位，float仅限特定排版。
absolute 和 float 是 CSS 中两种不同的布局方式，虽然都能改变元素的默认位置，但它们的工作机制和应用场景完全不同。
定位机制不同
absolute 属于定位（positioning）体系，元素脱离正常文档流，相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先，则相对于初始包含块（通常是视口）。
float 属于浮动布局，元素脱离正常文档流的行内部分，向左或向右移动，直到碰到父容器边缘或另一个浮动元素。其他内容会围绕浮动元素排列。
Revid AI
AI短视频生成平台
96 查看详情
对文档流的影响
使用 absolute 后，元素完全脱离文档流，不占据空间，其他元素像它不存在一样布局 使用 float 后，元素脱离正常流，但仍影响周围内容的排列，文本和其他内联内容会环绕它
常用用途对比
absolute 常用于精确控制元素位置，比如弹窗、下拉菜单、固定图层、页面中的绝对坐标布局 float 最初设计用于实现文字绕图效果，后来被广泛用于多列布局（在 Flex 和 Grid 出现前）
与其他布局属性的兼容性
absolute 元素可以使用 top、right、bottom、left 精确定位，并可通过 z-index 控制层级 float 元素不能使用 top/left 等偏移属性，其位置由浮动方向和周围元素决定，常需要 clear 来清除浮动影响
基本上就这些。现在推荐使用 Flexbox 或 Grid 进行整体布局，absolute 适合局部精确定位，而 float 已逐渐退出主流布局手段，主要用于特定排版需求。
立即学习“前端免费学习笔记（深入）”；
以上就是css定位absolute与float区别对比的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1043948.html
微信扫一扫 
支付宝扫一扫 
