盒模型——浮动的讲解和运用

博客喵喵

于 2025-05-26 22:35:42 发布

阅读量808

点赞数 12

CC 4.0 BY-SA版权

文章标签：前端 html css web前端

本文链接：https://blog.csdn.net/Xuu_666/article/details/148239268

一、浮动

浮动（float）是使用率较高的一种定位方式。有时希望相邻块级元素的盒子左右排列（所有盒子浮动），或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果时，最简单的方法就是运用浮动属性使盒子在浮动方式下定位。

浮动元素可以向左或向右移动，直到它的外边距边缘碰到包含块内边距边缘或另一个浮动元素的外边距边缘为止。float 属性定义元素在哪个方向浮动，任何元素都可以浮动，而浮动元素就会变成一个块状元素。

1、浮动属性值

left：元素向左浮动
right：元素向右浮动
none（默认值）：元素保持在正常文档流中，不发生浮动

语法格式：

float:none | left | right

2、脱离文档流相关特性

当盒子设置 float 属性浮动后，会脱离其初始位置，文档流后续的元素会自动填补其空位。

浮动后的盒子会生成一个与父盒等宽的浮层：

左浮动：第一个左浮动的盒子会浮至浮层，其他左浮动的盒子依次紧跟其后，从左往右排列，直到空间不足时换行

右浮动：第一个右浮动的盒子浮至浮层，其他右浮动的盒子从右往左排列，排不下时换行

浮动盒排布规则：

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

图片示例：

3、浮动带来的影响

（1）父盒的高度塌陷

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

示例代码：

article{
    width: 1920px;
    /* 当父盒没有设置时，其高度由子盒撑开，若子盒全部浮起，则高度塌陷为0 */
    /* height: 580px; */
    background-color: gray;
}

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

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

例图：

示例代码：

<!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: 100px;
                background-color: gray;
            }

        #div1{
            width: 300px;
            height: 50px;
            background-color: red;
            border: black 5px solid;
            margin-bottom: 5px;
            float: none;
          }  
      
        #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: left;
          } 

          #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: none;
          } 

          
    </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>

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

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

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

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

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

浮动机制的设计初衷：不是为了给你做导航栏的，而是用来制作图文混排效果的页面—— 对于现代前端开发来说，这种特性反而成为一种副作用。

例图：

示例代码：

<!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:pink ;
            border: black 5px solid;
            margin-bottom: 5px;
            float: left;
        }
        #div4 {
            width: 300px;
            height: 50px;
            background-color: aliceblue;
            border: black 5px solid;
            margin-bottom: 5px;
            float: right;
        }
        #div5 {
            width: 30px;
            height: 80px;
            background-color: pink;
            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{
            margin-right:20px;
            height:30px;
            background-color: rgb(178, 215, 240);
        }
        nav ul li{
            margin-right:20px;
            float:left;
        }
        #contact{
            width: 220px;
            height: 160px;
            background-color: rgb(238, 196, 203);
            border: 2px black solid;
            position: fixed;
            left:1100px;
            top:500px;
        }
        section{
            width: 100%;
            background-color:aliceblue;
        }
        header{
            width:100%;
            border:1px black solid;
            background-color:aliceblue;
        }
        footer{
            height:10%;
            width: 100%;
            border:1px black solid;
            background-color: aliceblue;
        }
           
    </style>

</head>  

<body>  
  
    <header>  
        <h1 align="center">广东云浮中医药职业学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr> 
        <nav>  
            <ul type="none">  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于我们</a></li>  
                <li><a href="#">学生风采</a></li>  
                <li><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>想了解广东云浮中医药职业学院：<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 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>  


</html>