盒子的浮动-CSDN博客

本文链接：https://blog.csdn.net/2501_90900388/article/details/148242220

一、脱离文档流

盒子设置float属性浮动后，将脱离其原本位置，文档流后面的元素会自动递补其位置。
盒子浮动起来后，会生成一个与父盒等宽的浮层。
左浮动：第一个设置左浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟
其后，从左到右排列，直到放不下才换行。（见动画演示）
右浮动：第一个设置右浮动的盒子浮至浮层，其它设置右浮动的盒子紧跟其后，从右到左排列，直到放不下才换行。

浮动盒排布规则：
1.向上向左 or向上向右排列
2.若空间无法容纳，则先向下移动，直到高度足够后再向左/向右
（取决于该盒子被设置为左浮动还是右浮动）
3.当前浮动盒的顶边，不得高于上一个浮动盒的顶边

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

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

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

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

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

为父盒设置明确高度值，有很多不足：
1.子元素内容变化导致布局错位
若子元素高度动态增加（如用户输入、异步加载数据等），父元素的固定高度无法自动扩展，会出现内容溢出或遮挡现象。
2.响应式适配能力缺失
固定高度在不同屏幕尺寸下易导致布局断裂，无法实现移动端多设备适配等自适应需求。
3.代码耦合度高
父元素高度需手动与子元素内容保持同步，任何子元素结构调整都会迫使开发者重新计算父元素高度。

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

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

下面用代码将导航栏实现下面的效果

<style>
        ul {
            height: 30px;
            background-color: aqua;
        }
        
        ul li {
            margin-right: 20px;
            float: left;
        }
    </style>

下面给盒子添加浮动

完整代码：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        article {
            width: 800px;
            height: 800px;
            background-color: gray;
        }
        
        #div1 {
            width: 300px;
            height: 50px;
            background-color: red;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        
        #div2 {
            width: 300px;
            height: 50px;
            background-color: green;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        
        #div3 {
            width: 300px;
            height: 50px;
            background-color: blue;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        
        #div4 {
            width: 300px;
            height: 70px;
            background-color: purple;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        
        #div5 {
            width: 300px;
            height: 80px;
            background-color: orange;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
    </style>

</head>

<body>

    <article>
        <div id="div1">盒子1</div>
        <div id="div2">盒子2</div>
        <div id="div3">盒子3</div>
        <div id="div4">盒子4</div>
        <div id="div5">盒子5</div>

    </article>

</body>

</html>

最终效果图：