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

CSS——标准流、浮动、Flex布局

news 2026/2/7 19:06:55

1、标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

2、浮动

作用：让块元素水平排列

属性名：float

属性值：

left：左对齐
right：右对齐

2.1 浮动-产品布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.product {margin: 50px auto;width: 1226px;height: 628px;background-color: pink;}.left {float:left;width: 234px;height: 628px;background-color: skyblue;}.right {float: right;width: 978px;height: 628px;background-color: brown;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: orange;}/* 第四个li和第八个li 去掉右侧的margin */.right li:nth-child(4n) {margin-right: 0;}/* 细节：如果父级宽度不够，浮动的盒子会掉下来 */</style>
</head>
<body><!-- 版心：左右，右面：8个产品 --> 8个li --><div class="product"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>

2.2 清除浮动

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

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

2.2.1 方法一：额外标签法

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

使用浮动已经产生影响的效果图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {margin: 10px auto;width: 1200px;/* height: 300px; */background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}.clearfix {clear: both;}</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div><div class="clearfix"></div></div><div class="bottom"></div>
</body>
</html>

2.2.2 方法二：单伪元素法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {margin: 10px auto;width: 1200px;/* height: 300px; */background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}/* 单伪元素法 */.clearfix::after {content: "";display: block;clear: both;}</style>
</head>
<body><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>

2.2.3 方法三：双伪元素法（推荐）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {margin: 10px auto;width: 1200px;/* height: 300px; */background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}/*before解决外边距塌陷问题*//* 双伪元素法 */.clearfix::before,.clearfix::after {content: "";display: table;}/*after 清除浮动*/.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>
</html>

2.2.4 overflow

父元素添加CSS属性 overflow：hidden

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.top {margin: 10px auto;width: 1200px;/* height: 300px; */background-color: pink;overflow: hidden;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>

总结：

浮动属性float，left表示左浮动，right表示右浮动
特点：
浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
父级宽度不够，浮动的子级会换行
浮动后的盒子脱标
清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
双伪元素法
单伪元素法
额外标签法
父元素添加CSS属性 overflow：hidden
拓展：浮动本质作用是实现图文混排效果

3、flex布局

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

flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

3.1 flex-组成

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

组成部分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向

3.2 flex布局

3.2.1 主轴对齐方式

属性名：justify-content

3.2.2 侧轴对齐方式

属性名：

align-items：当前弹性容器内所有的弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

3.2.3 修改主轴方向

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

属性名：flex-direction

属性值：

3.2.4 弹性伸缩比

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

属性名：flex

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

3.2.5 弹性盒子换行

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

属性名：flex-wrap

属性值

wrap：换行
nowrap：不换行（默认）

3.2.6 行对齐方式

属性名：align-content

属性值

综合案例-抖音解决方案

标签结构：div > ul > li*4

ul样式：

flex布局
弹性换行 flex-wrap:wrap
主轴对齐方式：space-between
行对齐方式：space-between

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}.box {margin: 50px atuo;width: 1200px;height: 418px;background-color: #ddd;border-radius: 10px;}.box ul {display: flex;/* 弹性盒子换行 */flex-wrap: wrap;/* 调整主轴对齐方式 */justify-content: space-between;/* 调整行对方式 */align-content: space-between;padding: 90px 40px 90px 60px;height: 418px;}.box li {display: flex;width: 500px;height: 88px;/* background-color: pink; */}.box .pic {margin-right: 15px;}.box .text h4 {line-height: 40px;font-size: 20px;font-weight: 400;color: #333;}.box .text p {font-size: 14px;color: #666;}</style>
</head>
<body><div class="box"><ul><li><div class="pic"><img src="../photo/9.png" alt=""></div><div class="text"><h4>一键发布多端</h4><p>发布视频到抖音短视频、西瓜视频及今日头条</p></div></li><li><div class="pic"><img src="../photo/10.png" alt=""></div><div class="text"><h4>管理视频内容</h4><p>支持修改已发布稿件状态和实时查询视频审核状态</p></div></li><li><div class="pic"><img src="../photo/11.png" alt=""></div><div class="text"><h4>发布携带组件</h4><p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p></div></li><li><div class="pic"><img src="../photo/12.png" alt=""></div><div class="text"><h4>数据评估分析</h4><p>获取视频在对应产品内的数据表现、获取抖音热点，及时进行表现评估</p></div></li></ul></div>
</body>
</html>

CSS——标准流、浮动、Flex布局

1、标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。 2、浮动作用：让块元素水平排列属性名：float 属性值： left：…...

编程日记 2023/12/15 20:22:22

P21 类神经网络训练不起来怎么办- 自动调整学习率 Adapative learning rate

梯度大，学习率减小梯度小，学习率变大adam随时间变化 ， decay / warm up 调整学习率方法一 adagrad 学习率除以梯度的方差方法二 RMSProp 目前最常用的： Adam: RMSProp Moment Learning rate schedule : decay/ warm up l…...

编程日记 2023/12/15 20:19:19

[Linformer]论文实现：Linformer: Self-Attention with Linear Complexity

文章目录一、完整代码二、论文解读2.1 介绍2.2 Self-Attention is Low Rank2.3 模型架构2.4 结果三、整体总结论文：Linformer: Self-Attention with Linear Complexity 作者：Sinong Wang, Belinda Z. Li, Madian Khabsa, Han Fang, Hao Ma 时间&#…...

编程日记 2023/12/15 20:17:17

【Jeecg Boot 3 - 第二天】1.1、后端 docker-compose 部署 JEECGBOOT3

一、场景二、实战 ▶ 2.1 修改配置文件 ＞ 目的一：将 dev 变更为生产环境 prod ＞ 目的二：方便spring项目调用docker同个network下的redis和mysql ▶ 2.2 编写dockerfile ▶ 2.3 编写docker-compose.yaml ▶ 2.4 打…...

编程日记 2023/12/15 20:15:15

Centos单用户模式修改root密码

在CentOS 7的单用户模式下，你可以按照以下步骤修改root用户密码： 启动CentOS 7并进入GRUB菜单。在启动时按下任意键进入GRUB菜单。在GRUB菜单中，选择要启动的CentOS 7内核版本，并按下e键进行编辑。找到以 ro 开头的行&#xf…...

编程日记 2023/12/15 20:14:15

[Unity]关于Unity接入Appsflyer并且打点支付

首先需要去官方下载Appsflyer的UnityPackage 链接在这afPackage 然后导入导入完成引入此段代码 using AppsFlyerSDK; using System.Collections; using System.Collections.Generic; using UnityEngine;public class AppflysManager : MonoBehaviour {public static App…...

编程日记 2023/12/15 20:13:14

AICore 带来了 Android 专属的 AI 能力，它要解决什么？采用什么架构思路？

前言 Google 最近发布的 Gemini 模型在全球引起了巨大反响，其在多模态领域的 Video demo 无比震撼。对于 Android 开发者而言，其中最振奋人心的消息莫过于 Gemini Nano 模型将内置到 Android 系统当中，并开放给开发者使用。事实上&#xf…...

编程日记 2023/12/15 20:11:12

python学习1

大家好，这里是七七，今天开始又新开一个专栏，Python学习。这次思考了些许，准备用例子来学习，而不是只通过一大堆道理和书本来学习了。啊对，这次是从0开始学习，因此大佬不用看本文了，小…...

编程日记 2023/12/15 20:09:10

【SpringBoot】Spring Boot 单体应用升级 Spring Cloud 微服务

Spring Cloud 是在 Spring Boot 之上构建的一套微服务生态体系，包括服务发现、配置中心、限流降级、分布式事务、异步消息等，因此通过增加依赖、注解等简单的四步即可完成 Spring Boot 应用到 Spring Cloud 升级。 Spring Boot 应用升级为 Spring Cloud…...

编程日记 2023/12/15 20:08:09

el-tree搜索的使用

2023.12.11今天我学习了如何对el-tree进行搜索的功能，效果如下： 代码如下： 重点部分：给el-tree设置ref，通过监听roleName的变化过滤数据。 default-expand-all可以设置默认展开全部子节点。 check可以拿到当前节点的…...

编程日记 2023/12/15 20:07:08

Java使用Microsoft Entra微软 SSO 认证接入

1. Microsoft Entra Microsoft Entra ID 是基于云的标识和访问管理服务，可帮助员工访问外部资源。示例资源包括 Microsoft 365、Azure 门户以及成千上万的其他 SaaS 应用程序。 Microsoft Entra ID 还可帮助他们访问你的企业 Intranet 上的应用等内部资源&#x…...

编程日记 2023/12/15 20:06:07

“华为杯”研究生数学建模竞赛2016年-【华为杯】A题：无人机在抢险救灾中的优化运用（附获奖论文及MATLAB代码实现）

目录摘要： 1. 问题重述 1.1. 问题背景 1.2. 需要解决的问题 1.2.1....

编程日记 2023/12/15 20:03:05

17--异常处理

1、异常概述 1.1 什么是异常异常：指的是程序在执行过程中，出现的非正常情况，如果不处理最终会导致JVM的非正常停止。异常指的并不是语法错误和逻辑错误。语法错了，编译不通过，不会产生字节码文件，根本运…...

编程日记 2023/12/15 20:02:04

数据结构 | c++编程实现求二叉树的叶节点的个数。(递归非递归)

目录非递归递归非递归 #include<iostream> #include<stack> using namespace std; struct BTNode {int data;BTNode* left, * right;BTNode(int val) :data(val), left(NULL), right(NULL) {}}; //递归的方式求二叉树的叶子结点数 int countnode(BTNode* t) …...

编程日记 2023/12/15 20:01:03

python读取csv文件

在Python中，你可以使用pandas库来读取CSV文件。以下是一个基本的例子： import pandas as pd# 读取CSV文件data pd.read_csv(filename.csv)# 显示前几行数据print(data.head()) 这里，filename.csv应该被替换为你的CSV文件的实际路径和名称。…...

编程日记 2023/12/15 19:59:01

租一台服务器多少钱决定服务器的价格因素有哪些

租一台服务器多少钱决定服务器的价格因素有哪些大家好我是艾西，服务器这个名词对于不从业网络行业的人们看说肯定还是比较陌生的。在21世纪这个时代发展迅速的年代服务器在现实生活中是不可缺少的一环，平时大家上网浏览自己想要查询的信息等都是需要服…...

编程日记 2023/12/15 19:54:58

深度学习（生成式模型）——ADM：Diffusion Models Beat GANs on Image Synthesis

文章目录前言基础模型结构UNet结构Timestep Embedding关于为什么需要timestep embedding global attention layer 如何提升diffusion model生成图像的质量Classifier guidance实验结果前言在前几篇博文中，我们已经介绍了DDPM、DDIM、Classifier guidance等相关的…...

编程日记 2023/12/15 19:52:56

Ubuntu无法解析域名DNS指向127.0.0.53问题处理

用nslookup 域名.com返回127.0.0.53无法解析错误 error"Could not lookup srv records on xxx.com: lookup xxx.com on 127.0.0.53:53: no such host" #首次尝试编辑/etc/resolved.conf文件DNS为8.8.8.8 或1.1.1.1 发现reboot重启后又恢复到127.0.0.53的内容#再次尝…...

编程日记 2023/12/15 19:46:51

Intewell-Hyper I_V2.0.0_release版本正式发布

新型工业操作系统_Intewell-Hyper I_V2.0.0_release版本正式发布软件发布版本信息版本号：V2.0.0 版本发布类型：release正式版本版本特点 1.建立Intewell-Hyper I基线版本版本或修改说明基于Intewell-Lin V2.3.0_release版本： 1.Devel…...

编程日记 2023/12/15 19:41:47

Mysql mybatis 语法示例

service package com.ruoyi.goods.service;import java.util.List; import com.ruoyi.goods.domain.GoodsProducts;/*** 商品Service接口* * author ruoyi* date 2023-08-27*/ public interface IGoodsProductsService {/*** 查询商品* * param ProductID 商品主键* return 商…...

编程日记 2023/12/15 19:37:44

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点）和 Decorator（装饰节点）四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发下面是 Solidity 合约开发的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为以太坊（Ethereum）平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

Python如何给视频添加音频和字幕

在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。环境准备在开始之前，需要安装以下Python库：…...

编程新知 2025/9/3 4:12:17

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...

编程新知 2025/11/10 10:45:11

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解一、事务的核心概念（ACID） 事务是…...

编程新知 2025/9/19 22:12:36

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目做法启动靶机，点进去点进去查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议当它与包含函数结合时，php://filter流会被当作php文件执行。用php://filter加编码，能让PHP把文件内容…...

编程新知 2026/1/30 2:28:32

uniapp 小程序学习（一）

利用Hbuilder 创建项目运行到内置浏览器看效果下载微信小程序安装到Hbuilder 下载地址 ：开发者工具默认安装设置服务端口号在Hbuilder中设置微信小程序配置找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现如下 bug 解…...

编程新知 2026/2/5 4:29:00

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54