一文了解前端最常用7种布局方式

最新推荐文章于 2025-05-09 19:48:32 发布

黑码小帅

最新推荐文章于 2025-05-09 19:48:32 发布

阅读量1.8k

点赞数 15

文章标签：前端 html html5 css3 css vue.js layui

本文链接：https://blog.youkuaiyun.com/ThomasChan123/article/details/145227529

版权

一弹性布局（Flexbox）-- 比较常用的布局方式

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .container {
            display: flex;
            justify-content: space-between; /* 主轴上的元素均匀分布 */
            align-items: center; /* 交叉轴上的元素居中对齐 */
        }
      .box {
            width: 300px;
            height: 200px;
            background-color: #35b655;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

描述：

使用 CSS 的 display: flex; 属性创建灵活的布局，它提供了强大的轴（主轴和交叉轴）布局方式，可方便地调整元素的对齐、排列和分布。

优点：

可以轻松实现元素的水平和垂直居中，调整元素的间距和排列顺序，对于一维布局非常方便。

缺点：

主要适用于一维布局，如果需要复杂的二维布局，可能需要嵌套多个 Flex 容器。

二定位布局（Positioning Layout）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .header {
            position: fixed;  /* 破坏文档流,跟content已经不是同一个文档流 */
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #eec2d7;
            color: white;
        }
      .content {
            margin-top: 70px; /* 为固定的 header 留出空间 */
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="header">固定导航栏</div>
    <div class="content">内容区域</div>
</body>

在上述示例中，.header 使用 position: fixed; 固定在页面顶部，.content 元素通过 margin-top 为固定的 .header 留出空间，避免被覆盖。

描述：

使用 position 属性（如 relative、absolute、fixed、sticky）对元素进行定位，通常用于实现特殊的布局效果，如固定的导航栏、弹出窗口等。

优点：

可以精确控制元素的位置，实现特殊的布局需求，如固定在页面的某个位置。

缺点：

可能会破坏文档流，需要精确计算元素的位置，过度使用可能导致布局难以维护。

三浮动布局 ( Float Layout)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .left-column {
            float: left;
            width: 30%;
            background-color: #f1bcbc;
            height: 300px;
        }
      .right-column {
            float: right;
            width: 65%;
            background-color: #ddebaa;
            height: 300px;
        }
     /* 清除浮动（clearfix）：
    由于浮动元素会脱离文档流，它们的父元素的高度可能会塌陷，为了防止这种情况，使用了 .clearfix 类。
    .clearfix::after 是一个伪元素，content: ""; 为其添加了一个空内容，display: table; 将其显示为表格元素，
    clear: both; 表示清除左右两侧的浮动，确保后续元素不会受到之前浮动元素的影响。 */
      .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="left-column">
        这是左侧栏
    </div>
    <div class="right-column">
        这是右侧栏
    </div>
    <div class="clearfix"></div>
</body>
</html>

.left-column 类中的元素使用 float: left; 并设置了 width: 30%;，使其向左浮动，占据父元素宽度的 30%，并设置了背景颜色和高度。
.right-column 类中的元素使用 float: right; 并设置了 width: 65%;，使其向右浮动，占据父元素宽度的 65%，并设置了背景颜色和高度。
这样就实现了一个简单的两栏布局，左侧栏占 30%，右侧栏占 65%，中间会有一些间隙。

描述：

浮动布局是一种通过 CSS 的 float 属性将元素从正常的文档流中脱离出来，使其向左或向右移动，直到它们的外边距碰到包含它们的元素的边框或另一个浮动元素的边框的布局方式。

元素可以设置为 float: left; 向左浮动，或者 float: right; 向右浮动。浮动元素会影响后续元素的排列，后续元素会环绕在浮动元素周围，根据浮动元素的位置调整自身的位置。

优点：

实现多列布局：

在 Flexbox 和 Grid 布局出现之前，浮动布局是实现多列布局的主要方式。通过将多个元素设置为不同的浮动方向（如一个元素 float: left;，另一个元素 float: right;），可以将它们并排放置，创建多栏布局，例如，常见的两栏或三栏布局。

可以使用不同的百分比宽度和边距设置，让布局更具灵活性，适应不同的页面宽度需求。

文本环绕效果：

可以实现文本环绕图片或其他元素的效果，类似于报纸或杂志的排版方式，为页面带来更多的排版样式。

兼容性好：

浮动布局在不同的浏览器中具有较好的兼容性，包括旧版本的浏览器，对于一些需要兼容旧浏览器的项目来说是一个可靠的选择。

缺点：

布局复杂时容易出现问题：

当多个元素同时浮动时，布局可能会变得难以管理和预测，尤其是在需要清除浮动时。如果不使用清除浮动的技术（如使用 clear 属性或添加额外的元素），会导致父元素的高度塌陷，影响页面的整体布局。

脱离文档流的影响：

由于浮动元素会脱离正常的文档流，它们会影响周围元素的布局，需要开发者对文档流有很好的理解，并且在布局中考虑浮动元素的影响。

可能导致布局元素的位置和尺寸难以精确控制，需要使用额外的手段（如添加外边距、内边距）来调整元素的位置。

不适合复杂的布局需求：

对于复杂的二维布局，如元素在垂直和水平方向上的精确排列，使用浮动布局会变得困难和繁琐，需要大量的计算和调整。例如，要实现一个复杂的网格布局，使用浮动布局可能需要大量的嵌套和清除浮动操作，而使用 Grid 布局会更加简洁和高效。

总之，浮动布局是一种在 CSS 布局历史中具有重要地位的布局方式，它有实现多列布局和文本环绕等优点，在兼容性方面也有一定优势，但在处理复杂布局时存在诸多缺点，对于现代前端开发，在更复杂的布局需求下，通常会优先考虑使用 Flexbox 或 Grid 布局。

四固定布局（Fixed Layout）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .container {
            width: 960px; /* 固定宽度 */
            margin: 0 auto; /* 居中容器 */
        }
      .box {
            width: 300px; /* 固定宽度 */
            float: left;
            height: 200px;
            background-color: #22d2df;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

描述：

页面元素使用固定的像素值来设置宽度，无论浏览器窗口如何变化，元素的尺寸都保持不变。

优点：

设计简单，易于控制元素的位置和大小，适合对布局一致性要求较高的页面。

缺点：

在小屏幕设备上可能会出现滚动条，用户可能需要滚动才能看到完整内容，在大屏幕设备上可能会出现大量空白区域。

五流式布局（Fluid Layout）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .container {
            width: 80%; /* 容器宽度为父元素的 80% */
            margin: 0 auto; /* 水平居中容器 */
        }
      .box {
            width: 30%; /* 元素宽度为容器宽度的 30%，会根据容器宽度自动调整 */
            float: left;
            height: 200px;
            background-color: #bdd823;
            margin: 5%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

在上述示例中，.container 的宽度是其父元素（这里是 body）的 80%，并且使用 margin: 0 auto; 使其水平居中。

.box 元素的宽度是 .container 的 30%，并使用 float: left; 进行排列，它们会根据 .container 的宽度自动调整大小。

描述：

也称为百分比布局，页面元素的宽度使用百分比来设置，使其可以根据浏览器窗口的大小自动调整。这种布局方式具有良好的适应性，适合不同屏幕尺寸的设备。

优点：

可以很好地适应不同的屏幕宽度，具有较高的灵活性，能够根据用户的屏幕大小进行缩放，提供一致的用户体验。

缺点：

在屏幕尺寸差异较大时，可能会导致元素变形或布局不够紧凑，需要额外的媒体查询来处理极端情况。

六网格布局（Grid Layout） -- 也比较常用

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 三列，每列宽度相等 */
            grid-gap: 10px; /* 网格间隙 */
        }
      .box {
            height: 200px;
            background-color: #b15c5c;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

在上述示例中，.container 使用 display: grid; 并通过 grid-template-columns 定义了三列，使用 grid-gap 定义了网格间隙。

描述：

使用 CSS 的 display: grid; 属性将页面划分为网格，可以精确地定位元素在网格中的位置，适合复杂的二维布局。

优点：

可以实现复杂的二维布局，方便对行和列进行定义和操作，对于布局设计具有较高的灵活性和可扩展性。

缺点：

学习曲线较陡，对于简单布局可能过于复杂。

七响应式布局（Responsive Layout）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .container {
            display: flex;
            flex-wrap: wrap;
        }
      .box {
            width: 300px;
            height: 200px;
            background-color: #84e2d6;
            margin: 10px;
        }
        @media screen and (max-width: 768px) {
          .box {
                width: 100%; /* 在小屏幕上，元素宽度占满一行 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

</html>

在上述示例中，使用 @media screen and (max-width: 768px) 媒体查询，当屏幕宽度小于等于 768px 时，.box 元素的宽度变为 100%，以适应小屏幕设备。

描述：

结合媒体查询（Media Queries）和上述布局方式，根据不同的屏幕尺寸调整页面布局，为不同设备提供不同的布局方案。

优点：

可以为不同的设备提供优化的布局，提高用户体验，增强网站的适应性。

缺点：

增加了代码复杂度，需要针对不同的屏幕尺寸编写多个布局规则。

建议读者把以上代码复制到代码编辑器运行查看浏览器页面，拖动浏览器大小观察每个布局方式的显示