当前位置：首页 > article >正文

【CSS3】04-标准流 + 浮动 + flex布局

article 2026/2/12 4:19:50

本文介绍浮动与flex布局。

1. 标准流

2. 浮动

2.1 基本使用

特点

脱标

2.2 清除浮动

2.2.1 额外标签法

2.2.2 单伪元素法

2.2.3 双伪元素法(推荐)

2.2.4 overflow(最简单)

3. flex布局

3.1 组成

3.2 主轴与侧轴对齐方式

3.2.1 主轴

3.2.2 侧轴

3.3 修改主轴方向

3.4 弹性伸缩比

3.5 弹性换行与行对齐

3.5.1 弹性盒子换行

3.5.2 行对齐方式

1. 标准流

也叫文档流，指的是标签在页面中默认的排布规则

例如：块元素独占一行，行内元素可以一行显示多个

2. 浮动

让块级元素水平排列

2.1 基本使用

属性名：float

属性值：left 左对齐；right 右对齐

两个标签都加上左浮动：都靠左

第二个改为右浮动：一左一右

特点

顶对齐，具备行内块的显示模式

脱标

给标签加上浮动，本身属于让其脱离标准流的控制

如果一个有浮动，另一个没有浮动，效果如下：

就会出现上面的叠加效果，因为浮动后的，不是标准流了，所以浏览器不会认为它在占用空间，下面没有加浮动的标签顺其自然的上移和one标签重叠。

所以最好两个都要浮动。

2.2 清除浮动

浮动元素会脱标，如果浮动的父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

先看正常的：

现在注释掉top的高度

因为 top.div 里的两个盒子是浮动的，属于脱标，浏览器会认为其不存在，所以出现上面的情况。

2.2.1 额外标签法

在父元素内容的最后添加一个块级元素，设置CSS属性：clear:both

2.2.2 单伪元素法

在父元素内容的最后添加一个块级元素

可以直接使用如下代码：

.clearfix::after {content: "";clear: both;display: block;
}

2.2.3 双伪元素法(推荐)

        /* 双伪元素 *//* before 解决外边距塌陷问题 */.clearfix::before,.clearfix::after {content: "";display: block;}.clearfix::after {clear: both;}</style>
</head>
<body><div class="top clearfix">      <div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>

2.2.4 overflow(最简单)

父元素添加CSS属性 overflow:hidden

3. flex布局

flex布局也叫弹性布局，是浏览器提倡的布局类型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

flex布局不会产生浮动布局中的脱标现象，更简单更灵活。

3.1 组成

设置方式：给父元素添加 display:flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器、弹性盒子(是容器的子级)、主轴(默认水平)、侧轴/交叉轴(默认垂直)

沿着主轴方向排列，自动挤压。

3.2 主轴与侧轴对齐方式

3.2.1 主轴

justify-content

常用后四个

flex-end

center

space-between

空白间距均匀分配在弹性盒子之间

space-around

空白间距均匀分布在弹性盒子两侧，两个弹性盒子之间的距离是两侧的2倍

space-evenly

各个间距都相等

3.2.2 侧轴

align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式

align-self 单独控制某个弹性盒子的侧轴对齐方式

前两个常用

align-items:

stretch

弹性盒子没有侧轴尺寸时才有效

center

flex-start

flex-end

align-self:

只举例一个，剩下都可以尝试

center

3.3 修改主轴方向

主轴默认水平方向，侧轴默认垂直方向

flex-direction

主轴方向变了，侧轴自动也会变化

只测试column

3.4 弹性伸缩比

控制弹性盒子的主轴方向的尺寸

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数

如果修改了主轴方向呢？

控制盒子的高

3.5 弹性换行与行对齐

3.5.1 弹性盒子换行

弹性盒子自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

flex-wrap

属性值：

wrap 换行

nowrap 不换行(默认)

3.5.2 行对齐方式

行与行之间的对齐方式（默认垂直方向）

align-content

属性值：（和主轴对齐方式一样）

演示效果：

flex-start

flex-end

center

space-between

space-around

space-evenly

注意：

align-content对单行的没有效果

也就是如果不换行(没有wrap)就没有效果，都在一行

本文介绍浮动与flex布局，重点掌握flex布局。

【CSS3】04-标准流 + 浮动 + flex布局

本文介绍浮动与flex布局。目录 1. 标准流 2. 浮动 2.1 基本使用特点脱标 2.2 清除浮动 2.2.1 额外标签法 2.2.2 单伪元素法 2.2.3 双伪元素法(推荐) 2.2.4 overflow(最简单) 3. flex布局 3.1 组成 3.2 主轴与侧轴对齐方式 3.2.1 主轴 3.2.2 侧轴 3.3 修改主…...

编程日记 2026/2/7 11:16:55

原文参考链接：https://www.cnblogs.com/leilcoding/p/16138778.html 编写生成证书的脚本 vim gen-ssl.sh #!/bin/sh # create self-signed server certificate: read -p "Enter your domain [www.example.com]: " DOMAIN echo "Create server key…...

编程日记 2026/1/21 8:30:39

使用 libevent 处理 TCP 粘包问题（基于 Content-Length 或双 \r\n）

在基于 libevent 的 TCP 服务器开发中，处理消息边界是常见需求。以下是两种主流分包方案的完整实现：一、基于 Content-Length 的分包方案 1.1 数据结构设计 typedef struct {struct bufferevent *bev;int content_length; // 当前消息的预期长度int received_bytes; //…...

编程日记 2026/1/16 2:34:08

论坛系统的测试

项目背景论坛系统采用前后端分离的方式来实现，同时使用数据库来处理相关的数据，同时将其部署到服务器上。前端主要有7个页面组成：登录页，列表页，论坛详情页，编辑页，个人信息页，我…...

编程日记 2026/2/5 17:27:29

宠物店小程序怎么做？助力实体店实现营销突破

宠物店小程序怎么做？助力实体店实现营销突破 ——一个宠物店老板的“真香”实战分享一、行业现状：线下宠物店的“流量焦虑” 作为开了3年宠物店的“铲屎官供应商”，这两年明显感觉生意难做了：某宝9.9包邮的狗粮、某团“满…...

编程日记 2026/2/5 17:27:28

《Mycat核心技术》第21章：高可用负载均衡集群的实现（HAProxy + Keepalived + Mycat）

作者：冰河星球：http://m6z.cn/6aeFbs 博客：https://binghe.gitcode.host 文章汇总：https://binghe.gitcode.host/md/all/all.html 星球项目地址：https://binghe.gitcode.host/md/zsxq/introduce.html 沉淀&#xff0c…...

编程日记 2026/2/5 17:27:27

obsidian ios git同步

首先感谢几位博主的文章，我现在时间久了，未保存原文地址。以下是我自己的执行步骤总结。应用商店安装 iSH 打开iSH，执行 apk update 安装下面软件，（我觉得只安装第一个应该就行，下次测试）。 …...

编程日记 2026/2/9 15:49:00

当 “原子” 遇上 “光腔”：量子计算的新舞台

在微观世界里，原子就像一个个会 “跳舞” 的小精灵，而科学家正试图用 “光的牢笼” 困住它们，让这些小精灵为量子计算 “打工”。最近，哈佛大学和 MIT 的研究团队在《科学》杂志上发表了一项突破性研究，他们让单个原子…...

编程日记 2026/2/4 1:06:56

移动端六大语言速记：第1部分 - 基础语法与控制结构

移动端六大语言速记：第1部分 - 基础语法与控制结构本文将对比Java、Kotlin、Flutter(Dart)、Python、ArkTS和Swift这六种移动端开发语言的基础语法与控制结构，帮助开发者快速理解各语言间的差异与共性。 1. 基础语法 1.1 数据类型各语言的基本数据…...

编程日记 2026/2/2 10:05:30

针对 SQL 查询中 IN 子句性能优化以及等值 JOIN 和不等值 JOIN 对比的详细解决方案、代码示例及表格总结

以下是针对 SQL 查询中 IN 子句性能优化以及等值 JOIN 和不等值 JOIN 对比的详细解决方案、代码示例及表格总结： 问题 1：IN 的候选值过多（如超过 1000 个） 问题描述当 IN 列表中的值过多时，SQL 会逐个比较每个值…...

编程日记 2026/1/18 21:59:15

微信小程序唤起app

1、前提 1、app与小程序主体需一致，可以前往微信公众平台关联。 2、小程序的场景值为1069，也就是得从app打开小程序，小程序才能唤起app。 2、vue3代码示例 <template><view class"maxBox bgc"><button open-typ…...

编程日记 2026/1/27 20:30:01

深度学习Note.5(机器学习.6)

1.Runner类一个任务应用机器学习方法流程： 数据集构建模型构建损失函数定义优化器模型训练模型评价模型预测所以根据以上，我们把机器学习模型基本要素封装成一个Runner类（加上模型保存、模型加载等功能。） Runne…...

编程日记 2026/2/5 17:39:06

从零开始设计Transformer模型（1/2）——剥离RNN，保留Attention

声明： 本文基于哔站博主【Shusenwang】的视频课程【RNN模型及NLP应用】，结合自身的理解所作，旨在帮助大家了解学习NLP自然语言处理基础知识。配合着视频课程学习效果更佳。材料来源：【Shusenwang】的视频课程【RNN模型及NLP应用…...

编程日记 2026/2/5 17:38:02

Uniapp 持续出现 Invalid Host/Origin header 解决方法

目录前言1. 问题所示2. 原理分析前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 爬虫神器，无代码爬取，就来：bright.cn 1. 问题所示执行代码的时候，源源不断，一直持续出现这个 Invalid Host/Origin header [WDS]...

编程日记 2026/1/22 14:48:34

【＜二＞丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 中的缓存技术：使用 Redis 提升性能

<前文回顾> 点击此处查看合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、开篇整…...

编程日记 2026/2/5 17:27:26

音视频 YUV格式详解

前言本文介绍YUV色彩模型，YUV的分类和常见格式。 RGB色彩模型在RGB颜色空间中，任意色光F都可以使用R、G、B三色不同的分量混合相加而成即： F = R + G + B.。即我们熟悉的三原色模型。 RGB色彩空间根据每个分量在计算机中占用的存储字节数可以分为以下几种类型，字节数…...

编程日记 2025/12/11 6:03:30

华为配置篇-BGP实验

BGP 一、简述二、常用命令总结三、实验一、简述 IBGP 水平分割：从一个 IBGP 对等体学到的路由，不会再通告给其他的 IBGP 对等体。在一个 AS 内部，路由器之间通过 IBGP 交换路由信息。如果没有水平分割机制，当多个路由器之间形成…...

编程日记 2026/2/5 17:28:04

一个服务器算分布式吗，分布式需要几个服务器

一个服务器不构成分布式系统。分布式系统的核心在于多台独立的计算机（服务器）协同工作，通过通信网络共享资源、共同完成任务。以下是对问题的详细分析： 1. 单台服务器 ≠ 分布式单台服务器的架构是集中式的，所有功能…...

编程日记 2025/12/12 18:39:19

vue element-ui 工程创建

vue element-ui 工程创建按照步骤 ： https://blog.csdn.net/wowocpp/article/details/146590400 创建工程 vue create demo3 cd demo3 npm run serve 在demo3 目录里面执行如下命令 npm install element-ui -S 然后查看 package.json main.js 添加代码&…...

编程日记 2026/2/5 17:28:09

unity点击button后不松开通过拖拽显示模型松开后模型实例化

using System.Collections; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI;[RequireComponent(typeof(Button))] // 确保脚本挂在Button上 public class DragButtonSpawner : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandle…...

编程日记 2026/2/6 15:00:43

1. 标准流

2. 浮动

2.1 基本使用

特点

脱标

2.2 清除浮动

2.2.1 额外标签法

2.2.2 单伪元素法

2.2.3 双伪元素法(推荐)

2.2.4 overflow(最简单)

3. flex布局

3.1 组成

3.2 主轴与侧轴对齐方式

3.2.1 主轴

3.2.2 侧轴

3.3 修改主轴方向

3.4 弹性伸缩比

3.5 弹性换行与行对齐

3.5.1 弹性盒子换行

3.5.2 行对齐方式

相关文章：