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

CSS-1_0 CSS和文档流

news 2026/2/2 16:23:54

文章目录

  • CSS和文档流
    • 如何证明这个流的存在呢？
    • 流和display
      • 番外：inline-block
  • 碎碎念

CSS和文档流

首先什么叫流呢？

通常来说，我们最终看到的网页是HTML文档中定义的各个元素挨个输出的结果，这种一个接一个输出的方式，就是HTML的默认文档流



如何证明这个流的存在呢？

其实当你第一次使用 float 这个属性的时候，你就已经接触到这个东西了，来看这个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="A" class="float-container"><div id="C" class="box" style="background: red"></div><div id="D" class="box" style="background: green"></div>
</div>
<div id="B">我是B
</div>
</body>
</html><style>.float-container > * {float: left;}.box {padding: 2em;}
</style>

在这里插入图片描述


我们给作为A子元素的C和D赋予padding和颜色，让我们看到他，接着输出了B

看似很正常，其实很诡异


B是一个块状元素啊，为什么看起来他跟A处在同一行呢？他为什么不换行？

我不打算卖关子，其实B已经换行了，只不过A的高度此时=0

那你会说不对啊，明明A的内部有C和D，高度怎么可能等于0？


这就是流在起作用，A和B都属于HTML的文档流；而C和D由于float的作用，他们已经不属于文档流了，他们属于浮动流（这也是我们把元素设定成float的时候他会无视原有的元素的display值横向展示的原理）。所以在我们计算A的高度时他会=0。这一点你用F12可以证明，也可以通过消除浮动让这个例子恢复正常，你只需要加上这段代码就可以：

#A::after{display: block;content: "";clear: both;
}

在这里插入图片描述

这是清除元素浮动对元素的宽高值影响的标准写法



流和display

如果上面的例子改成这样，又会发生神奇的事情：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="A" class="float-container">我是A<div id="C" class="box" style="background: red">我是C</div><div id="D" class="box" style="background: green">我是D</div>
</div>
<div id="B"><span>我是B</span>
</div>
</body>
</html><style>.float-container > * {float: left;}.box {padding: 2em;}#A, #B {display: inline-block;vertical-align: bottom; /*如果不加这句你会发现A跟B对不齐*/}
</style>

在这里插入图片描述


这下B是真不换行了

先解释一下为什么会先输出C和D，然后才输出 我是A 这句话

你知道float这个属性本来是用来干嘛的吗？

这个属性最开始不是用来布局的，他是用来实现那种类似报纸杂志上那种图片放在一侧，旁边围绕文字的效果的。只不过他用来做布局太合适了，所以才会被大量使用于布局。而且在那个没有流式布局、网格布局的年代，浮动布局还真就是你最好的解决方案

但不是唯一的解决方案，还有一些做法可以把元素用表格的方式显示。你可以说是网格布局的雏形，但他其实是一种取巧的做法。在网格布局已经成熟的今天，请抛弃这种写法

如果考虑到这个，那就好理解了。我们float C和D，那么他们肯定会被优先输出到文档流的最左侧，然后输出A中的文档流，也就是 我是A 这句话

接着，B没有换行，直接在后面输出了

没错，这就是 display:inline-block 在起作用，而不同的display是如何影响元素的，那就要从CSS的盒模型说起了

番外：inline-block

其实设定 float:left 跟 display:inlin-block 是一样的，都是把元素从正常的文档流中写入到浮动流中。而且我们知道块状元素和行内元素他们是通过display这个属性来区分和获取对应的样式的（display:block/inline）。设定 display:inline-block 后，相当于你无法使用这两种元素的样式，所以最后你会得到一个 宽度由元素决定，且不换行的块状元素，而且他是处于浮动流的




碎碎念

  • HTML页面在输出元素的时候，遵循一种被称之为 标准流 的顺序，你可以修改display这个属性的值，把元素从标准流中取出来
  • 设定float属性的时候，其实他也是把display属性给修改了。所以设定了float的元素，已经不在标准流中了，因此标准流的元素在计算尺寸时不会考虑浮动子元素
  • 你可以通过 clear 属性来强制清除浮动流带来的影响
  • inline-block 可以手动把元素写入浮动流，最后你会得到一个宽度由元素决定，且不换行的块状元素





万分感谢您看完这篇文章，如果您喜欢这篇文章，欢迎点赞、收藏。还可以通过专栏，查看更多与【CSS笔记】有关的内容

相关文章：

CSS-1_0 CSS和文档流

文章目录 CSS和文档流如何证明这个流的存在呢&#xff1f;流和display番外&#xff1a;inline-block 碎碎念 CSS和文档流 首先什么叫流呢&#xff1f; 通常来说&#xff0c;我们最终看到的网页是HTML文档中定义的各个元素挨个输出的结果&#xff0c;这种一个接一个输出的方式…...

编程日记 2024/7/19 19:40:16

小程序图片下载保存方法，图片源文件保存！

引言 现在很多时候我们在观看到小程序中的图片的时候&#xff0c;想保存图片的原文件格式的话&#xff0c;很多小程序是禁止保存的&#xff0c;即使是让保存的话&#xff0c;很多小程序也会限制不让保存原文件&#xff0c;只让保存一些分辨率很低的&#xff0c;非常模糊的图片…...

编程日记 2024/7/19 19:34:10

新书速览|深入理解Hive:从基础到高阶:视频教学版

《深入理解Hive&#xff1a;从基础到高阶&#xff1a;视频教学版》 本书内容 《深入理解Hive:从基础到高阶:视频教学版》采用“理论实战”的形式编写&#xff0c;通过大量的实例&#xff0c;结合作者多年一线开发实战经验&#xff0c;全面地介绍Hive的使用方法。《深入理解Hiv…...

编程日记 2024/7/19 19:32:07

钡铼Profinet、EtherCAT、Modbus、MQTT、Ethernet/IP、OPC UA分布式IO系统BL20X系列耦合器

BL20X系列耦合器是钡铼技术开发的一款用于分布式I/O系统的设备&#xff0c;专为工业环境下的高速数据传输和远程设备控制而设计&#xff0c;支持多种工业以太网协议&#xff0c;包括Profinet、EtherCAT、Modbus、MQTT、Ethernet/IP和OPC UA等。如果您正在考虑部署BL20X系列耦合…...

编程日记 2024/7/19 19:30:05

Git分支合并以及分支部分合并 提交记录合并

Git分支合并,以及分支部分合并,提交记录合并 最近工作中用到git分支合并的场景,记录一下. 分支整体合并,合并所有记录 仅合并分支部分代码...

编程日记 2024/7/19 19:28:01

IDEA关联数据库

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …...

编程日记 2024/7/19 19:24:58

【Leetcode】14. 最长公共前缀

leetcode原地址&#xff1a;https://leetcode.cn/problems/longest-common-prefix 描述 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 “”。 示例 1&#xff1a; 输入&#xff1a;strs [“flower”,“flow”,“flight”…...

编程日记 2024/7/19 19:23:57

【BUG】已解决：zipfile.BadZipFile: File is not a zip file

已解决&#xff1a;zipfile.BadZipFile: File is not a zip file 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武汉城市开发…...

编程日记 2024/7/19 19:21:55

小白新手搭建个人网盘

小白新手搭建个人网盘 序云服务器ECS重置密码远程连接ECS实例 安装OwnCloud安装Apache服务PHP运行环境NAS挂载挂载验证操作体验 序 阿里云文件存储NAS&#xff08;Apsara File Storage NAS&#xff09;是一个可大规模共享访问&#xff0c;弹性扩展的分布式文件系统。本文主要是…...

编程日记 2024/7/19 19:19:53

NineData全面支持PostgreSQL可视化表结构设计

“PostgreSQL 是最像 Oracle 的开源关系型数据库“&#xff0c;也正因为如此&#xff0c;很多企业都青睐 PostgreSQL&#xff0c;拿它当成 Oracle 的替代品。所以毫无疑问&#xff0c;目前 PostgreSQL 在企业中非常常见。 对于直接接触 PostgreSQL 的开发人员而言&#xff0c;…...

编程日记 2024/7/19 19:18:52

从系统层面认识Linux及mysql中的多表查询

为什么计算机起始时间是1970年1月1日 为什么计算机起始时间是1970年1月1日-CSDN博客https://blog.csdn.net/csdn_kou/article/details/81535452 date "%Y-%m-%d %H:%M:%S" 查看日期 sudo ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 在数据层面 CPU不…...

编程日记 2024/7/19 19:14:49

PCB（印制电路板）制造涉及的常规设备

印制电路板&#xff08;PCB&#xff09;的制造涉及多种设备和工艺。从设计、制作原型到批量生产&#xff0c;每个阶段都需要不同的专业设备。以下是一些在PCB制造过程中常见的设备&#xff1a; 1. 计算机辅助设计&#xff08;CAD&#xff09;软件&#xff1a; - 用于设计PC…...

编程日记 2024/7/19 19:12:46

《Windows API每日一练》10.3 公用对话框

Windows最初发行时的主要目标之一就是提倡一种标准化的用户界面。对于公用菜单 项来说&#xff0c;这一目标实现得很快。几乎所有的软件制造商都采用了Alt-File-Open组合来打开 文件。但是&#xff0c;真正用来打开文件的对话框却经常很不一样。 从Windows 3.1开始&#xff0c…...

编程日记 2024/7/19 19:11:44

C++中的引用

在C中&#xff0c;我们要学习一个新的概念&#xff0c;叫做引用。引用不是对象&#xff0c;它只是给变量取一个别名。就好比&#xff0c;我们每个人总会右一下外号&#xff0c;或者是小名。当朋友或者家长不管是直接叫你的名字&#xff0c;还是叫你的小名&#xff0c;你都会答应…...

编程日记 2024/7/19 19:06:40

【自学安全防御】三、企业双机热备和带宽管理的综合实验

实验拓扑&#xff1a; 实验任务&#xff1a; 12&#xff0c;对现有网络进行改造升级&#xff0c;将当个防火墙组网改成双机热备的组网形式&#xff0c;做负载分担模式&#xff0c;游客区和DMZ区走FW3&#xff0c;生产区和办公区的流量走FW1 13&#xff0c;办公区上网用户限制流…...

编程日记 2024/7/19 19:05:39

无极与有极电容的区别

无极性电容与有极性电容&#xff1a;差异与应用探索 在电子元件的广阔世界里&#xff0c;电容器无疑是不可或缺的一部分。它们以储存电荷和调节电路中的电压与电流而闻名。然而&#xff0c;电容器并非一概而论&#xff0c;其中最为显著的区别之一就是无极性电容与有极性电容。…...

编程日记 2024/7/19 19:04:37

入坑树莓派（2）——树莓派4B与手机蓝牙通信

入坑树莓派（2）——树莓派4B与手机蓝牙通信 1、引言 在入坑树莓派（1）中已经搞掂了可视化问题。现在继续开展下一步，尝试与手机通信，一开始是想弄wifi连接的，但发现基于wifi的APP比较难弄，为了降低开发的难度，又因为树莓派板子自带蓝牙模块，所以直接选用蓝牙连接手机…...

编程日记 2024/7/19 19:03:36

RocketMQ单结点安装/Dashboard安装

目录 1.安装NameServer 2.安装Broker 3.使用自带工具测试数据发送 4.使用DashBoard进行查看 5.关闭相关设备 前置条件&#xff1a;两台虚拟机CentOS Linux release 7.5.1804(ps:当然也可以都部署在一台机器上) RocketMq属于天生集群。需要同时启动nameServer和Broker进行…...

编程日记 2024/7/19 19:00:33

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第二篇 Linux系统编程篇-第三十四章 进程基础

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...

编程日记 2024/7/19 18:59:32

使用LVS+NGinx+Netty实现数据接入

数据接入 链接参考文档 LVSKeepalived项目 车辆数据上收&#xff0c;TBox通过TCP协议连接到TSP平台 建立连接后进行数据上传。也可借由该连接实现远程控制等操作。 通过搭建 LV—NGinx—Netty实现高并发数据接入 LVS&#xff1a;四层负载均衡&#xff08;位于内核层&#x…...

编程日记 2024/7/19 18:58:31

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/1 6:19:35

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/1/26 5:25:25

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

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

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

编程新知 2026/1/29 4:00:56

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/21 14:21:52

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2026/1/28 16:22:46

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/11/4 22:48:45