HTML的浮动

原创于 2025-05-24 19:43:12 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

文章标签：

漂浮的盒子想必没有见过，试试看

一、脱离文档

盒子设置房float属性浮动后，将脱离其原本位置，文档流后面的元素会自动递补其位置。

盒子浮动起来后，会生成一个与父盒等宽的浮层。

左浮动：第一个设置左浮动的盒子浮至浮右浮动：第一个设置右浮动的盒子浮至浮

（left）层，其它设置左浮动的盒子紧跟层，其它设置右浮动的盒子紧跟

其后。从左到右排序，直到放不其后。从右到左排序，直到放不

下才换行。下才换行。

浮动盒子排布规则：
1. 向上向左or向上向右排列

2. 若空间无法容纳，则先向下移动，只到高度足够后再向左 / 向右

（取决于该盒子被设置为左浮动还是向右浮动）

3. 当前浮动盒的顶边，不得不高于上一个浮动盒的顶边

依旧整点素材

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习</title>
    <style>
        article{
            height: 900px;
            width: 1000px;
            background-color: black;
        }
        #a1{
            height: 100px;
            width: 200px;
            background-color: red;
        }
        #a2{
            height: 100px;
            width: 200px;
            background-color: yellow;
        }
        #a3{
            height: 100px;
            width: 200px;
            background-color: green;
        }
        #a4{
            height: 100px;
            width: 200px;
            background-color: blue;
        }
 
 
    </style>
</head>
<body>
    <article>
        <div id="a1">盒子1</div>
        <div id="a2">盒子2</div>
        <div id="a3">盒子3</div>
        <div id="a4">盒子4</div>
    </article>
</body>
</html>

让我们看看，添加了浮动属性会有哪些变化

<style>
        article{
            height: 900px;
            width: 1000px;
            background-color: black;
        }
        #a1{
            height: 100px;
            width: 200px;
            background-color: red;
            float: left;
            /* 从左到右 */
        }
        #a2{
            height: 100px;
            width: 200px;
            background-color: yellow;
            float: right;
            /* 从右到左 */
        }
        #a3{
            height: 100px;
            width: 200px;
            background-color: green;
            float: left;
            /* 从左到右 */
        }
        #a4{
            height: 100px;
            width: 200px;
            background-color: blue;
            float: right;
            /* 从右到左 */
        }

似乎还漏了点什么，有了

二、浮动带来的影响1：父盒的高度塌陷

概念:
当父盒高度没有设置时，其高度由子盒撑开。若子盒全部浮走，则高度塌陷为0。

副作用:
1. 当子元素设置浮动后脱离文档流，父元素无法感知子元素的高度，导致自身高度计算为0。此时父元素的边框、背景等样式可能无法正常显示。

2. 父元素塌陷后，其下方的非浮动元素会向上移动，与浮动子元素产生覆盖或重叠现象，破坏原本的布局结构。例如底部内容可能与浮动元素区域重叠。

最简单的解决方案:

如果场景允许，可直接给父盒设置一个明确的高度值。但此方法不灵活，通常不推荐，除非确实需要固定高度(因为有时候我们确确实实希望父盒高度由子盒决定，比如说动态渲染的场景就不适合)

为父盒设置明确高度值，有很多不足:

1.子元素内容变导致布局错位
若子元素高度动态增加(如用户输入、异步加载数据等)，父元素的固定高度无法自动扩展，会出现内容溢出或遮挡现象。

2.响应式适配能力缺失
固定高度在不同屏幕尺寸下易导致布局断裂，无法实现移动端多设备适配等自适应需求。

3.代码耦合度高
父元素高度需手动与子元素内容保持同步，任何子元素结构调整都会迫使开发者重新计算父元素高度。

三、浮动带来的影响2：兄弟盒子的文字环绕

盒子浮动后，文档流后面的兄弟盒子会自动递补其位置。其中，文本会非常敏感，将自动环绕浮动盒。
(浮动机制的设计初衷:不是为了给你做导航栏的，而是用来制作图文混排效果的页面) ——对于现代前端开发来说，这种特性反而成为一种副作用