前言
本文收录于CSS 系列文章中[1]，欢迎阅读指正
CSS 布局在 Web 开发中经历了多个阶段的演变，不同的时期出现了不同的布局方法，以适应不断变化的设计需求，从表格布局，浮动布局，到弹性盒，格栅布局，每个阶段都提供了灵活、强大的布局工具，本文将介绍 css 布局相关的知识点。
表格布局
在 CSS 广泛被支持之前，许多网站使用 HTML 表格来创建页面结构。这是早期的布局方法，它使用 HTML
元素以及其行()和单元格()的组合来构建网页的结构，设计页面布局
特点不足
下面看个表格布局的例子
<!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>
代码中的标签构成了整个页面的骨架。通过合并单元格()和通过的 width 属性指定宽度，这段代码创建了包含页眉、导航菜单、主内容区、侧边栏和页脚的典型页面结构。
浮动布局
浮动布局是 CSS 的一个功能，它允许开发者将元素从常规的文档流中移出，使元素向其容器的左侧或右侧“浮动”。通过使用 CSS 的 float 属性，元素可以横向排列，从而实现多列布局。在引入 和 CSS Grid 这些现代布局技术之前，浮动布局是实现复杂页面布局的主要手段之一。
特点不足
float 属性表示给标签加上浮动效果css样式，它有四个值：
clear 属性表示清除标签的浮动，也有四个值：
下面我用一个例子来展示浮动的效果
<!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
设置 属性为 或 fixed
属性为 -block、table-cell、table-、flex、-flex
属性为 auto、 或
以上操作均会形成 BFC
高度塌陷
在使用浮动时当浮动的父标签没设置高度（或者高度不足以支撑浮动元素的高度）也没有其他标签时，父标签就会产生高度塌陷的效果。参考上面的代码，我们将 的 : 去除可以看到以下效果
1,2,3 这三个盒子都因为浮动效果脱离了文档流，可以理解为离开了父元素的文档流，并产生了 BFC 的效果，它们的布局和父元素的布局已经隔离开了。
解决方案
产生高度塌陷或许是我们不想看到的效果，如何解决浮动产生的高度塌陷？这就要使用魔法打败魔法了，我们在父元素上创建一个新的 BFC，使父子元素处于同一布局环境下，常用的解决方案也就是我上面说到的方式，给父元素增加 : ，除此之外还有以下方案：
.container::after {
content: "";
display: table;
clear: both;
}
定位布局
定位布局是一种使用 CSS 定位属性来摆放元素的布局方式。通过设置元素的 属性，开发者可以将元素放置到文档流中的指定位置，可以是相对于文档流中的其他元素或相对于视口。
特点不足
属性有几个不同的值，可以让开发者按照需要将元素摆放在页面上的几乎任何位置。设置定位后通过 top,,left,right 和 z-index 可以调整元素的位置和层级。
（静态定位）
这是所有元素的默认定位方式。
元素按照正常的文档流进行定位，也就是说，它们按照 HTML 中的顺序出现，并且不会受到 top,,left,right 和 z-index 属性的影响。
（相对定位）
相对于元素的原始位置进行定位。
设置了相对定位的元素可以通过 top,right, 和 left 属性从其正常位置移动。
其他元素会认为这个元素仍然处于它的静态位置，因此，它可能会覆盖其他元素或者被其他元素覆盖。
（绝对定位）
元素的位置相对于最近的被定位（即非 ）的祖先元素进行定位。一般是和 搭配使用。
如果没有这样的祖先元素，则相对于文档的根元素（HTML 页面上的元素）定位。
和 不同的是绝对定位的元素被完全从文档流中移除，因此，它们不会影响其他元素的位置。
fixed（固定定位）
元素的位置相对于浏览器窗口进行定位，不随滚动条滚动。
使用此定位的元素会固定在页面的指定位置，即使滚动页面内容也不会移动。
同样地，固定定位的元素也是脱离了文档流的。
（粘性定位）
它是一个相对新的定位特性，它是相对定位和固定定位的结合。
元素根据文档流正常排列，直到页面滚动到达某个阈值点，元素就会在视口中"固定"在指定位置。
粘性定位依赖于 top,right,,left 等属性，当元素到达视口中的特定位置时，才会起作用。
总结
本篇文章主要介绍了早期开发者的常用布局方式。包括表格，浮动，定位布局，这三者各自有其特点和弊端，根据项目合理使用适合的布局方式才是本文的最终目的
以上就是文章全部内容了，感谢你看到最后，如果觉得文章不错的话，给个三连鼓励一下吧css样式，你的支持就是我创作的最大动力，谢谢！
相关代码
: 基于 js 的一些小案例或者项目 - [2]
参考文章
CSS 布局 - 学习 Web 开发 | MDN[3]
浮动 - 学习 Web 开发 | MDN[4]
定位 - 学习 Web 开发 | MDN[5]
参考资料
[1]
CSS 系列文章中:
[2]
: 基于 js 的一些小案例或者项目 - : %E7%9F%A5%E8%AF%86%E7%82%B9/%E5%B8%83%E5%B1%80
[3]
CSS 布局 - 学习 Web 开发 | MDN:
[4]
浮动 - 学习 Web 开发 | MDN:
[5]
定位 - 学习 Web 开发 | MDN: