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