重拾CSS，前端样式精读-布局（表格，浮动，定位）

前言

本文收录于CSS系列文章中，欢迎阅读指正

CSS布局在Web开发中经历了多个阶段的演变，不同的时期出现了不同的布局方法，以适应不断变化的设计需求，从表格布局，浮动布局，到弹性盒，格栅布局，每个阶段都提供了灵活、强大的布局工具，本文将介绍css布局相关的知识点。

表格布局

在CSS广泛被支持之前，许多网站使用HTML表格来创建页面结构。这是早期的布局方法，它使用HTML<table>元素以及其行(<tr>)和单元格(<td>)的组合来构建网页的结构，设计页面布局

特点

模拟网格系统：通过创建行和列，表格布局可以模拟网格系统，从而安排页面内容。
垂直对齐：在表格中，可以通过属性轻松实现元素的垂直对齐，这是其它早期布局技术所不具备的。
布局稳定性：使用表格布局的页面在各种浏览器中通常显示一致。

不足

结构与表现混合：表格标签混合了页面结构和布局表现，使得页面内容与其表现形式难以分离。
代码臃肿：页面代码过于复杂，这不仅降低了页面加载速度，而且使得维护和更新变得更加困难。
不灵活：对于响应式设计来说，表格布局的适应性不如后来的CSS布局技术，如Flexbox和Grid。
SEO影响：搜索引擎优化可能受到影响，因为搜索引擎可能会错误地解释表格布局中的内容结构。

下面看个表格布局的例子

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        /* 基本的表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        /* 用于模拟常见的布局结构 */
        header,
        footer {
            background-color: #f8f9fa;
            text-align: center;
        }

        nav {
            background-color: #e9ecef;
        }

        article {
            background-color: #fff;
        }

        aside {
            background-color: #e9ecef;
        }
    </style>
</head>

<body>

    <table>

        <!-- 页眉 -->
        <tr>
            <td colspan="2">
                <header>
                    <h1>网站标题</h1>
                </header>
            </td>
        </tr>

        <!-- 导航菜单 -->
        <tr>
            <td colspan="2">
                <nav>
                    <ul>
                        <li><a href="#">主页</a></li>
                        <li><a href="#">资讯</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </nav>
            </td>
        </tr>

        <!-- 主内容区与侧边栏 -->
        <tr>
            <!-- 主要内容 -->
            <td>
                <article>
                    <h2>文章标题</h2>
                    <p>这里是文章内容...</p>
                </article>
            </td>
            <!-- 侧边栏 -->
            <td width="200"> <!-- 设定宽度 -->
                <aside>
                    <h3>侧边栏标题</h3>
                    <p>侧边栏内容...</p>
                </aside>
            </td>
        </tr>

        <!-- 页脚 -->
        <tr>
            <td colspan="2">
                <footer>
                    <p>版权信息©2024</p>
                </footer>
            </td>
        </tr>
    </table>

</body>

</html>

代码中的<table>标签构成了整个页面的骨架。通过合并单元格(colspan)和通过<td>的width属性指定宽度，这段代码创建了包含页眉、导航菜单、主内容区、侧边栏和页脚的典型页面结构。

浮动布局

浮动布局是CSS的一个功能，它允许开发者将元素从常规的文档流中移出，使元素向其容器的左侧或右侧“浮动”。通过使用CSS的float属性，元素可以横向排列，从而实现多列布局。在引入Flexbox和CSS Grid这些现代布局技术之前，浮动布局是实现复杂页面布局的主要手段之一。

特点

流动性：浮动可以让元素脱离文档流，从而提供了创建可自然环绕图像和元素的布局的流动性。这在早期Web设计中被广泛用来模仿更传统的印刷媒介布局。
灵活性：浮动允许开发者以更为灵活的方式排列元素，而不必依赖于表格或者其他布局结构。
简易排版：可以实现较为复杂的多栏布局，如杂志或报纸风格的布局。
向后兼容性：早期的Web浏览器普遍支持浮动，使其成为实现多列布局的可靠方法。
相对直观：对于简单的布局，浮动是一个相对容易理解和实现的技术。

不足

清除问题：浮动元素需要清除。如果未正确清除，布局可能会出现不可预测的行为，如父容器高度塌陷。
结构限制：复杂的浮动布局可能需要大量的计算和调整，特别是当涉及动态内容或响应式设计时。
容易混乱：在大型或复杂的项目中，过度使用浮动会导致代码难以理解和维护。
限制性：布局变化通常需要更改HTML结构。浮动元素通常需要按顺序放置，这为开发者设立了限制。

float属性表示给标签加上浮动效果，它有四个值：

left：将元素浮动到左侧。
right：将元素浮动到右侧。
none：默认值，不浮动。
inherit：继承父元素的浮动属性。

clear属性表示清除标签的浮动，也有四个值：

none：默认值，不清除浮动。
left：清除左浮动
right：清除右浮动
both：清除双边浮动

下面我用一个例子来展示浮动的效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .container {
            border: 1px solid #ccc;
            padding: 10px;
            overflow: hidden;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #000;
            float: left;
            /* 默认左浮动 */
        }

        .btn {
            margin: 10px;
            padding: 5px;
            color: white;
            cursor: pointer;
            display: inline-block;
            background: lightcoral;
        }
    </style>
    <title>浮动布局演示</title>
</head>

<body>
    <h2>浮动布局演示</h2>
    <p>点击按钮切换浮动效果：</p>

    <div id="leftFloatBtn" class="btn">左浮动</div>
    <div id="rightFloatBtn" class="btn">右浮动</div>
    <div id="clearFloatBtn" class="btn">清除浮动</div>

    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <p>这是一些文本内容，用以展示在盒子浮动的时候文本是如何围绕它的。通过点击下面的按钮，你可以切换盒子的浮动效果。这段文本足够长，可以让我们看到文本如何环绕一个浮动的元素。</p>
    </div>

    <script>
        document.getElementById('leftFloatBtn').addEventListener('click', function () {
            applyFloat('left');
        });

        document.getElementById('rightFloatBtn').addEventListener('click', function () {
            applyFloat('right');
        });

        document.getElementById('clearFloatBtn').addEventListener('click', function () {
            clearFloat();
        });

        function applyFloat(direction) {
            var boxes = document.querySelectorAll('.box');
            boxes.forEach(function (box) {
                box.style.float = direction;
            });
        }

        function clearFloat() {
            var boxes = document.querySelectorAll('.box');
            boxes.forEach(function (box) {
                box.style.float = 'none';
            });
        }
    </script>
</body>

</html>

代码创建了两个浮动的方框和一个容器。按钮可以控制方框的浮动方向或清除浮动

块格式化上下文（BFC）

聊到浮动（包括后面会讲到的定位），就离不开BFC的概念，这里做个简单的介绍：BFC是一个独立的布局环境，它决定了页面中的元素如何对其内容进行布局，以及如何与其他元素相互作用和影响。在BFC中，元素的布局不受外部元素的影响，反之亦然。

怎么形成的？

元素的float属性为left或right
设置position属性为absolute或fixed
display属性为inline-block、table-cell、table-caption、flex、inline-flex
overflow属性为auto、hidden或scroll

以上操作均会形成BFC

高度塌陷

在使用浮动时当浮动的父标签没设置高度（或者高度不足以支撑浮动元素的高度）也没有其他标签时，父标签就会产生高度塌陷的效果。参考上面的代码，我们将container的overflow: hidden去除可以看到以下效果

1,2,3这三个盒子都因为浮动效果脱离了文档流，可以理解为离开了父元素的文档流，并产生了BFC的效果，它们的布局和父元素的布局已经隔离开了。

解决方案

产生高度塌陷或许是我们不想看到的效果，如何解决浮动产生的高度塌陷？这就要使用魔法打败魔法了，我们在父元素上创建一个新的BFC，使父子元素处于同一布局环境下，常用的解决方案也就是我上面说到的方式，给父元素增加overflow: hidden，除此之外还有以下方案：

after伪类清除浮动

.container::after {
    content: "";
    display: table;
    clear: both;
}

为父元素创建BFC环境
参考上文的BFC形成方式，根据开发场景修改父元素的属性达到对应效果

定位布局

定位布局是一种使用CSS定位属性来摆放元素的布局方式。通过设置元素的position属性，开发者可以将元素放置到文档流中的指定位置，可以是相对于文档流中的其他元素或相对于视口。

特点

精准定位：定位布局允许开发者精确地控制元素在页面中的位置，可以相对于文档流中的其他元素或相对于视口进行定位。
自由定位：元素可以脱离正常文档流，不受周围元素的影响，使得开发者可以更灵活地设计页面布局。
适用于特殊效果：定位布局适用于创建一些特殊效果，如悬浮菜单、弹出层、tooltip 等。
层叠顺序：使用z-index属性可以控制定位元素的层叠顺序，使得开发者可以控制元素的叠放顺序。
相对简单：定位布局的概念相对简单，易于理解和掌握，适用于一些小型项目或简单页面的布局。

不足

复杂布局困难：对于复杂布局需求，如：等高布局、垂直居中等，使用定位布局可能变得繁琐且难以维护。
可能影响可访问性：不当使用绝对定位可能导致元素在阅读器或屏幕阅读器中的顺序混乱，影响可访问性。
维护难度：复杂的定位布局可能导致代码难以维护，尤其是在项目逐渐扩大的情况下。

position属性有几个不同的值，可以让开发者按照需要将元素摆放在页面上的几乎任何位置。设置定位后通过top,bottom,left,right和z-index可以调整元素的位置和层级。

static（静态定位）

这是所有元素的默认定位方式。

元素按照正常的文档流进行定位，也就是说，它们按照HTML中的顺序出现，并且不会受到top,bottom,left,right和z-index属性的影响。

relative（相对定位）

相对于元素的原始位置进行定位。

设置了相对定位的元素可以通过top,right,bottom和left属性从其正常位置移动。

其他元素会认为这个元素仍然处于它的静态位置，因此，它可能会覆盖其他元素或者被其他元素覆盖。

absolute（绝对定位）

元素的位置相对于最近的被定位（即非static）的祖先元素进行定位。一般是和relative搭配使用。

如果没有这样的祖先元素，则相对于文档的根元素（HTML页面上的<html>元素）定位。

和relative不同的是绝对定位的元素被完全从文档流中移除，因此，它们不会影响其他元素的位置。

fixed（固定定位）

元素的位置相对于浏览器窗口进行定位，不随滚动条滚动。

使用此定位的元素会固定在页面的指定位置，即使滚动页面内容也不会移动。

同样地，固定定位的元素也是脱离了文档流的。

sticky（粘性定位）

它是一个相对新的定位特性，它是相对定位和固定定位的结合。

元素根据文档流正常排列，直到页面滚动到达某个阈值点，元素就会在视口中"固定"在指定位置。

粘性定位依赖于top,right,bottom,left等属性，当元素到达视口中的特定位置时，才会起作用。

总结

本篇文章主要介绍了早期开发者的常用布局方式。包括表格，浮动，定位布局，这三者各自有其特点和弊端，根据项目合理使用适合的布局方式才是本文的最终目的

以上就是文章全部内容了，感谢你看到最后，如果觉得文章不错的话，给个三连鼓励一下吧，你的支持就是我创作的最大动力，谢谢！

参考文章

CSS 布局 - 学习 Web 开发 | MDN

浮动 - 学习 Web 开发 | MDN

定位 - 学习 Web 开发 | MDN