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

CSS 浮动布局

news 2026/1/24 4:14:55

本文参考

https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722

文档流简介

正常文档流

正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。

我们先来看一下正常文档流的简单定义：正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。

也就是说，正常文档流指的就是默认情况下页面元素的布局情况。

脱离文档流

脱离文档流，指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。换一句话说，如果我们想要改变正常文档流，

可以使用两种方法：浮动和定位

二、浮动

浮动的元素会向左或向右浮动，直到碰到前面已经有浮动的元素或者是其父元素的边框为止。浮动的元素会脱离文档流（不再占有原来的位置）。

（一）左右浮动

块级元素除了使用display: inline-block;可以使其共占一行外，还可以使用浮动来实现。

还是两个div的例子，正常状态下是这个效果。

我们给这两个div加一个外层容器作为他们的父容器：
 

.father-box {border: #FF0000 4px solid;
}

<div class="father-box"><div class="box">1</div><div class="box">2</div>
</div>

给第一个div设置向左浮动效果

<div class="father-box"><div class="box" style="float: left;">1</div><div class="box">2</div>
</div>

可以看到页面效果发生了变化，第二个div不见了，其实第二个div并没有消失，而是第一个div浮动起来之后它的空间被释放出来（脱离文档流，不占有原来的空间），第二个div进行了向前补位，去到了原本第一个div的位置，被浮起来的第一个div遮挡住了。简而言之，浮动的元素脱离了这个平面去到了这个平面的上方。

但浮动的元素不是无限制的浮动，而是在自己父容器范围内浮动，向左浮动时，碰到其父容器的左边缘或者该元素前面其它已经浮动的元素就会停止。

这里的第一个div就是碰到了其父元素的左边框停止的。

接下来我们给第二个div也加上浮动：
 

<div class="father-box"><div class="box" style="float: left;">1</div><div class="box" style="float: left;">2</div>
</div>

这时第二个div也浮了起来，两个div又到了同一个平面上，第二个div因为碰到了前面已经浮动的第一个div停止了浮动

(二）清除浮动（所带来的影响）


虽然元素浮动起来之后可以实现共占一行的效果，但是也给其父元素和后面的元素产生了影响，所以就有了清除浮动所带来的影响的方法。

1. 清除第一种影响，对父元素产生的影响。
上面的例子两个div都浮动起来之后，因为脱离了出来，导致其父容器内没有了东西，所以父容器的高度也没法被撑开，看上去像变成了一条线。

（1）给父容器加高度清除影响
 

.father-box {border: #FF0000 4px solid;height: 200px;
}

（2）给父容器加overflow: auto或overflow: hidden清除影响

两种方式都可让父容器的高度恢复。

2. 清除第二种影响，对后面元素产生的影响。

先回到没有清除影响的时候：

.father-box {border: #FF0000 4px solid;
}

我们再加一个div而且不设置浮动：

<div class="father-box"><div class="box" style="float: left;">1</div><div class="box" style="float: left;">2</div><div class="box">3</div>
</div>

这时页面效果中父元素的高被新增的div撑开，但是由于该div没有浮动，还在这两个div的下层，自动补位到了第一个div的下面，被第一个div所遮挡住，看不见。

要想让浮动元素的后续元素不自动向前补位（也就是说即使元素浮动了，原本的位置要给它留出来），我们可以使用clear来清除这个影响，它的值有left、right、both，left代表清除左浮动带来的影响，right代表清除右浮动带来的影响，both代表两者都清除。

我们需要多加一个空白元素来执行清除影响：

<div class="father-box"><div class="box" style="float: left;">1</div><div class="box" style="float: left;">2</div><!-- 使用一个空的 div 清除浮动 --><div style="clear: both;"></div><div class="box">3</div>
</div>

第三个div恢复原有的排版独占一行。

向右浮动同理，这里不再讲述。

本例完整代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>浮动</title><style>.box {width: 100px;height: 100px;background-color: red;color: white;padding: 20px;margin: 20px;box-sizing: border-box;}.father-box {border: #FF0000 4px solid;}</style>
</head>
<body><div class="father-box"><div class="box" style="float: left;">1</div><div class="box" style="float: left;">2</div><!-- 使用一个空的 div 清除浮动 --><div style="clear: both;"></div><div class="box">3</div></div>
</body>
</html>

相关文章：

CSS 浮动布局

本文参考 https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722 文档流简介 正常文档流 正常文档流&#xff0c;又称为“普通文档流”或“普通流”&#xff0c;也就是W3C标准所说的“normal flow”。 我们先来看一下正常文档流的简单定义&#xff1a;正常文档…...

编程日记 2023/10/22 3:43:15

CentOS 系统安装和使用Docker服务

系统环境 使用下面的命令&#xff0c;可以查看CentOS系统的版本。 lsb_release -a结果&#xff1a; 说明我的系统是7.9.2009版本的 安装Docker服务 依次执行下面的指令&#xff1a; yum install -y yum-utilsyum install -y docker即可安装docker服务 如果这样安装不成功…...

编程日记 2023/10/22 3:42:14

Docker-镜像的备份迁移及私有仓库的搭建

一、Docker-备份与迁移 A服务器系统配置 B服务器系统配置 1.用命令将容器保存为镜像。 案例&#xff0c;将A服务器的Docker容器迁移到另外一台服务器B&#xff0c;A服务器的容器配置过对应的文件&#xff0c;不想在B服务器重新搭建&#xff0c;可以使用该案例。 docker c…...

编程日记 2023/10/22 3:41:14

SQL数据库管理工具RazorSQL mac中文版特点与功能

RazorSQL mac是一款功能强大的SQL数据库管理工具&#xff0c;它支持多种数据库&#xff0c;包括MySQL、Oracle、Microsoft SQL Server、SQLite、PostgreSQL等。 RazorSQL mac 软件特点和功能 多种数据库支持&#xff1a;RazorSQL支持多种数据库&#xff0c;用户可以通过一个工…...

编程日记 2023/10/22 3:40:13

Unigui可以使用WebSocket进行客户端之间的实时互相发消息

Unigui可以使用WebSocket进行客户端之间的实时互相发消息。WebSocket是一种支持双向通信的网络协议&#xff0c;可以使客户端和服务器之间实时地进行数据交换。 实现步骤: 1. 在Unigui项目中添加WebSocket组件。 2. 在WebModule的OnCreate事件中开启WebSocket服务。 proced…...

编程日记 2023/10/22 3:39:12

Win32 简单日志实现

简单实现日志保存, 支持设置日志文件数量, 单个日志文件大小上限, 自动超时保存日志, 日志缓存超限保存 CLogUtils.h #pragma once#include <string> #include <windows.h> #include <vector> #include <map> #include <mutex> #include <tc…...

编程日记 2023/10/22 3:38:09

保姆级阿里云ESC服务器安装nodejs或Linux安装nodejs

1. 创建node文件夹 默认 /opt 下边 /opt/node 也可建到其他地方&#xff0c;如/usr/local/node 等 创建后切换到文件夹下 cd /opt/node cd /opt/node2. 下载node并解压 使用命令下载node wget https://nodejs.org/dist/v18.12.0/node-v18.12.0-linux-x64.tar.xz wget https…...

编程日记 2023/10/22 3:36:07

《动手学深度学习 Pytorch版》 9.3 深度循环神经网络

将多层循环神经网络堆叠在一起&#xff0c;通过对几个简单层的组合&#xff0c;产生一个灵活的机制。其中的数据可能与不同层的堆叠有关。 9.3.1 函数依赖关系 将深度架构中的函数依赖关系形式化&#xff0c;第 l l l 个隐藏层的隐状态表达式为&#xff1a; H t ( l ) ϕ l …...

编程日记 2023/10/22 3:35:06

2023-10-19 LeetCode每日一题（同积元组）

2023-10-19每日一题 一、题目编号 1726. 同积元组二、题目链接 点击跳转到题目位置 三、题目描述 给你一个由 不同 正整数组成的数组 nums &#xff0c;请你返回满足 a * b c * d 的元组 (a, b, c, d) 的数量。其中 a、b、c 和 d 都是 nums 中的元素&#xff0c;且 a ! b…...

编程日记 2023/10/22 3:34:04

GEE：绘制土地利用类型面积分布柱状图

作者：CSDN @ _养乐多_ 本文记录了，在 Google Earth Engine （GEE）中进行随机森林分类后绘制不同类型面积分布柱状图的代码片段。 完整代码请看博客《GEE：随机森林分类教程（样本制作、特征添加、训练、精度、参数优化、贡献度、统计面积）》 柱状图效果如下所示， 文章目…...

编程日记 2023/10/22 3:33:00

2021年03月 Python（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python编程&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 下列代码的输出结果是&#xff1f;&#xff08; &#xff09; x 0x10print(x)A&#xff1a;2 B&#xff1a;8 C&#xff…...

编程日记 2023/10/22 3:31:59

全网最丑焊锡教程（仅排针焊接心得）

一直以来玩各种开发板&#xff0c;焊接水平太差始终是阻碍我买性价比高的板子的最大原因。淘宝上好多芯片搭载上肥猪流板子是不包排针焊接的。终于下定决心要克服这个困难。不过&#xff0c;只是会焊接排针在高手面前最好不要说自己会焊锡&#xff0c;这应该是两码事。 首先上…...

编程日记 2023/10/22 3:30:58

重测序基因组：Pi核酸多样性计算

如何计算核酸多样性 Pi 本期笔记分享关于核酸多样性pi计算的方法和相关技巧&#xff0c;主要包括原始数据整理、分组文件设置、计算原理、操作流程、可视化绘图等步骤。 基因组Pi核酸多样性&#xff08;Pi nucleic acid diversity&#xff09;是一种遗传学研究中用来描述种群内…...

编程日记 2023/10/22 3:28:56

C++学习之多态详解

目录 多态的实现 例题 重载 重写 重定义的区别 抽象类 多态实现原理 多态的实现 C中的多态是指&#xff0c;当类之间存在层次结构&#xff0c;并且类之间是通过继承关联时&#xff0c;就会用到多态。多态意味着调用成员函数时&#xff0c;会根据调用函数的对象的类型来执…...

编程日记 2023/10/22 3:27:55

项目经理之识别项目干系人

项目干系人管理是项目管理中的重要一环&#xff0c;识别和管理好项目干系人是成功实施项目的关键之一。本文将介绍4321项目干系人识别方法、干系人等级册以及五步判断法等工具&#xff0c;帮助项目经理更好地识别和管理项目干系人。同时&#xff0c;本文还将介绍干系人能量方格…...

编程日记 2023/10/22 3:26:54

文件列表创建工具 Nifty File Lists mac中文版功能特色

Nifty File Lists mac是一款文件列表创建工具&#xff0c;全面的元数据支持&#xff0c;涵盖了从基本文件信息&#xff0c;如文件名、路径、大小、创建和修改日期等等内容。 Nifty File Lists mac功能特色 全面的 元数据支持强大的多线程元数据提取系统涵盖了从基本文件信息&a…...

编程日记 2023/10/22 3:25:53

人人自媒体的时候，Ai绘画还值得踏入吗？

前言 先说结论&#xff0c;如果你不打算涉足自媒体&#xff0c;平时也从不上网发什么内容去展示自己的话&#xff0c;其实AI绘画对你来说意义不大。但如果你对自媒体感兴趣&#xff0c;会涉及发作品&#xff0c;发内容&#xff0c;甚至去设计图片&#xff0c;那么AI绘画值得你…...

编程日记 2023/10/22 3:24:51

最近学习内容(2023-10-21)

最近学习内容 Linux编译链接命令一条有用的删除可执行文件的bash命令gcc 在macos 的编译选项&#xff0c;其中-g会生成一个.dSYM文件夹to long don’t read 工具的使用gnu bintuils 的使用&#xff0c;但是很可惜macos上的是Mach-O&#xff0c;不是ELFaxel多线程下载器和其余的…...

编程日记 2023/10/22 3:23:50

Java设计模式 | 基于订单批量支付场景，对策略模式和简单工厂模式进行简单实现

基于订单批量支付场景&#xff0c;对策略模式和简单工厂模式进行简单实现 文章目录 策略模式介绍实现抽象策略具体策略1.AliPayStrategy2.WeChatPayStrategy 环境 使用简单工厂来获取具体策略对象支付方式枚举策略工厂接口策略工厂实现 测试使用订单实体类对订单进行批量支付结…...

编程日记 2023/10/22 3:22:49

【组件专题介绍】什么是组件？

组件定义 卡耐基梅隆大学&#xff1a; 一个不透明的功能实体&#xff0c;能够被第三方组装&#xff0c;且符合一个构件模型。 计算机百科全书&#xff1a; 是软件系统中具有相对独立功能、接口由契约指定、和语境有明显依赖关系、可独立部署、可组装的软件实体。 软件构件…...

编程日记 2023/10/22 3:21:47

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/15 6:38:00

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2026/1/14 20:17:34

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/1/20 18:39:44

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

编程新知 2025/10/4 11:36:04

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

编程新知 2026/1/22 14:08:16

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

编程新知 2026/1/20 22:11:17