CSS——浮动布局

原创已于 2025-06-02 15:51:28 修改 · 631 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2025-05-26 20:21:04 首次发布

wed前端开发专栏收录该内容

12 篇文章

订阅专栏

一、脱离文档流

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

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

1、左浮动、右浮动

左浮动：第一个设置左浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从左到右排列，直到放不下才换行。

右浮动:第一个设置右浮动的盒子浮至浮层，其它设置右浮动的盒子紧跟其后，从右到左排列，直到放不下才换行。

#div1 {
    width: 300px;
    height: 50px;
    background-color: lightblue;
    border: black 5px solid;
    margin-bottom: 5px;
    float: left;
}

如果五个盒子都将 float 属性设置为左，便会呈现：

同理右浮动的呈现方式：

浮动盒排布规则

1.向上向左 or 向上向右排列

2.若空间无法容纳,则先向下移动,直到高度足够后再向左/向右(取决于该盒子被设置为左浮动还是右浮动)

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

二、浮动带来的影响

（一）父盒的高度塌陷

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

最简单的解决方案如果场景允许:

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

图像示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #div1 {
            width: 100px;
            height: 30px;
            background-color: red;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #div2 {
            width: 300px;
            height: 50px;
            background-color:green;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #div3 {
            width: 200px;
            height: 70px;
            background-color:royalblue ;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #div4 {
            width: 100px;
            height: 50px;
            background-color: purple;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #div5 {
            width: 100px;
            height: 80px;
            background-color: yellow;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }

    </style>
</head>
<body>
    <div id="div1">红</div>
    <div id="div2">绿</div>
    <div id="div3">蓝</div>
    <div id="div4">紫</div>
    <div id="div5">黄</div>

</body>
</html>

为父盒设置明确高度值，有很多不足:
1.子元素内容变化导致布局错位

若子元素高度动态增加(如用户输入、导步加载数据等)，父元素的固定高度无法自动扩展，会出现内容溢出或遮挡现象。
2.响应式适配能力缺失

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

3.代码耦合度高

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

（二）兄弟盒子的文字环绕

盒子浮动后，文档流后面的兄弟盒子会自动递补其位置。其中、文本会非常敏感，将自动环绕浮动盒。

(浮动机制的设计初衷:不是为了给你做导航栏的，而是用来制作图文混排效果的页面)

对于现代前端开发来说，这种特性反而成为一种副作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        #div1 {
            width: 300px;
            height: 50px;
            background-color: lightblue;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #div2 {
            width: 300px;
            height: 50px;
            background-color:skyblue ;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #div3 {
            width: 300px;
            height: 50px;
            background-color:royalblue ;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #div4 {
            width: 300px;
            height: 50px;
            background-color: blue;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #div5 {
            width: 30px;
            height: 80px;
            background-color: rgb(98, 0, 255);
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }

    </style>
</head>
<body>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <p>盒子浮动后，文档流后面的兄弟盒子会自动递补其位置。其中、文本会非常敏感，将自动环绕浮动盒。</p>
    <div id="div4">4</div>
    <div id="div5">5</div>

</body>
</html>

三、练习

代码：

<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>典型的网页结构示例:带横向导航栏</title>  

    <style>
        nav ul{
            height:40px;
            background-color: yellowgreen;
        }
        nav ul li{
            margin-right: 20px;
            float:left;
        }
        #contact{
            background-color: aquamarine;
            width: 250px;
            height: 150px;
            border: black 3px solid;
            position: fixed;
            right: 10px;
            bottom: 30px;
            
        }
    </style>
</head>  

<body>  
  
    <header>  
        <h1 align="center">广东XXXX学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr> 
        <nav>  
            <ul type="none">  
                <li id="ct1"><a href="#">首页</a></li>  
                <li id="ct2"><a href="#">关于我们</a></li>  
                <li id="ct3"><a href="#">学生风采</a></li>  
                <li id="ct4"><a href="#">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr>  
    <main>  
        <section>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  
                <p>想了解广东XXX学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  

            <br>
            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>专业</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>计算机应用技术</td>  
                        <td><a href="专业A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>数字媒体技术</td>  
                        <td><a href="专业B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  
        </section>  
    
        <section id="contact">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
    </main>  
    <hr>  
    <footer>  
        <p>版权所有 &copy; 2024 广东XXX职业学院计算机学院</p>  
    </footer>  
  
</body>  


</html>