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

DIV+CSS网页布局

news 2025/12/16 6:46:29

本文参考

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

二、浮动

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

（一）左右浮动

块级元素除了使用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>

相关文章：

DIV+CSS网页布局

本文参考 https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722 二、浮动 浮动的元素会向左或向右浮动&#xff0c;直到碰到前面已经有浮动的元素或者是其父元素的边框为止。浮动的元素会脱离文档流&#xff08;不再占有原来的位置&#xff09;。 &#xff08…...

编程日记 2023/10/18 21:32:13

python二次开发CATIA：CATIA Automation

CATIA 软件中有一套逻辑与关系都十分严谨的自动化对象&#xff0c;它们从CATIA(Application)向下分支。每个自动化对象&#xff08;Automation Object&#xff0c;以下简称Object&#xff09;都有各自的属性与方法。我们通过程序语言调用这些 Object 的属性与方法&#xff0c;便…...

编程日记 2023/10/18 21:30:11

2023年中国云计算软件市场规模、市场结构及市场份额情况分析[图]

云计算是分布式计算的一种&#xff0c;指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序&#xff0c;然后&#xff0c;通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。云计算软件类型分为三类&#xff0c;即基础设施即服务、平台即服…...

编程日记 2023/10/18 21:28:09

docker入门加实战—部署Java和前端项目

docker入门加实战—部署Java和前端项目 部署之前&#xff0c;先删除nginx&#xff0c;和自己创建的dd两个容器&#xff1a; docker rm -f nginx dd部署Java项目 作为演示&#xff0c;我们的Java项目比较简单&#xff0c;提供了一个接口&#xff1a; 配置文件连接docker里的m…...

编程日记 2023/10/18 21:27:09

机器人制作开源方案 | 行星探测车概述

1. 功能描述 行星探测车&#xff08;Planetary Rover&#xff09;是一种用于进行科学探索和勘测任务的无人车辆&#xff0c;它们被设计成能够适应各种复杂的地形条件和极端环境&#xff0c;以便收集数据、拍摄照片、采集样本等。行星探测车通常包含以下主要组件和功能&#xff…...

编程日记 2023/10/18 21:26:07

Git基础命令

一、Git 码云创建空白仓库 什么都不选&#xff0c;使用代码初始化 初始化仓库&#xff1a;git init 配置信息&#xff1a;git config user.name"mashuchao" 配置信息&#xff1a;git config user.email"mashuchao.com" 查看配置信息&#xff1a;git c…...

编程日记 2023/10/18 21:24:06

C#中Semaphore 和 CountdownEvent 的使用总结

信号量(Semaphore)&#xff0c;有时被称为信号灯&#xff0c;是在多线程环境下使用的一种设施&#xff0c;是可以用来保证两个或多个关键代码段不被并发调用。在进入一个关键代码段之前&#xff0c;线程必须获取一个信号量。一旦该关键代码段完成了&#xff0c;那么该线程必须释…...

编程日记 2023/10/18 21:23:04

THE PLANETS：EARTH vulnhub

信息收集 netdiscover -i eth0 -r 192.168.239.0&#xff0c;扫描存活主机&#xff0c;发现目标主机 对目标主机进行端口扫描&#xff1a;nmap -p- -sV -O -Pn -A 192.168.239.186&#xff0c;发现443端口存在DNS&#xff0c;域名 在本地得/etc/hosts中添加域名信息 浏览…...

编程日记 2023/10/18 21:22:04

【随想】每日两题Day.13

题目&#xff1a;344. 反转字符串 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&…...

编程日记 2023/10/18 21:21:03

CMake Cookbook

使用CMake软件对项目模块&#xff0c;进行构建、测试和打包。 Introduction - 《CMake菜谱&#xff08;CMake Cookbook中文版&#xff09;》 - 书栈网 BookStack https://github.com/dev-cafe/cmake-cookbook/tree/v1.0...

编程日记 2023/10/18 21:20:02

钢铁异常分类 few-shot 问题 小陈读paper 钢铁2

很清爽的 abstract 给出链接 前面的背景意义 其实 是通用的 这里替大家 整理一吓吓 1 缺陷分类在钢铁表面缺陷检测中 有 意义。 2 大多数缺陷分类模型都是基于完全监督的学习&#xff0c; 这需要大量带有图像标签的训练数据。 在工业场景中收集有缺陷的图像是非常困难…...

编程日记 2023/10/18 21:19:01

flask实战（问答平台）

问答平台项目结构搭建 先创建一个配置文件config.py&#xff0c;后面有些配置写在这里 #app.py from flask import Flask import configapp Flask(__name__) #绑定配置文件 app.config.from_object(config)app.route(/) def hello_world(): # put applications code herer…...

编程日记 2023/10/18 21:17:59

RK3568驱动模块编译进内核

一、创建文件 首先在drivers/char目录下创建hello文件夹&#xff0c;然后在hello文件夹下创建hello.c 文件、Kconfig和Makefile文件。   hello.c 文件内容如下 #include <linux/module.h> #include <linux/kernel.h> static int __init helloworld_init(void) …...

编程日记 2023/10/18 21:16:58

黑马程序员Java Web--14.综合案例--修改功能实现

一、BrandMapper包 首先&#xff0c;在BrandMapper包中定义用来修改的方法&#xff0c;和使用注解的sql语句。 BrandMapper包所在路径&#xff1a; package com.itheima.mapper; /**** 修改* **/Update("update tb_brand set brand_name #{brandName},company_name #{c…...

编程日记 2023/10/18 21:15:57

开源协议介绍

文章目录 一、简介二、常见开源协议介绍2.1 BSD &#xff08;Berkeley Software Distribution license&#xff09;2.2 MIT&#xff08;Massachusetts Institute of Technology&#xff09;2.3 Apache Licence 2.02.4 GPL&#xff08;General Public License&#xff09;2.5 LG…...

编程日记 2023/10/18 21:14:56

solidworks 2024新功能之-打造更加智能的工作 硕迪科技

SOLIDWORKS 2024 的新增功能 SOLIDWORKS 的每个版本都致力于改进您的工作流程&#xff0c;使您常用的工具尽可能快速高效地运作。此外&#xff0c;SOLIDWORKS 2024 可以通过量身定制的解决方案扩展您的工具集&#xff0c;并使您能够通过 Cloud Services 轻松将您的设计数据连接…...

编程日记 2023/10/18 21:13:55

Datawhale学习笔记AI +新能源：电动汽车充电站充电量预测

赛题介绍 建立站点充电量预测模型&#xff0c;根据充电站的相关信息和历史电量数据&#xff0c;准确预测未来某段时间内充电站的充电量需求。 在赛题数据中&#xff0c;我们提供了电动汽车充电站的场站编号、位置信息、历史电量等基本信息。我们鼓励参赛选手在已有数据的基础上…...

编程日记 2023/10/18 21:12:55

记一次fineBI的增量删除更新BUG

官方文档链接是https://help.fanruan.com/finebi/doc-view-1663.html 按照官方文档&#xff0c;增量删除不能使用select * &#xff0c;且需要指定分区建 但实际指定分区键有时候也会报错&#xff0c;因为表设置的字段有时候会比数据源少&#xff0c;此时会报错&#xff0c;提…...

编程日记 2023/10/18 21:10:53

rsync+inotify实时同步+双向同步

准备主机 192.168.1.247 &#xff08;源&#xff09; /home/appdata 192.168.1.248 &#xff08;目的&#xff09; /home/appdata 实现效果&#xff1a; 1.用rsync手动将192.168.1.247 的/home/appdata同步到192.168.1.248的/home/appdata目录。 2.用inotify组件实现文件的…...

编程日记 2023/10/18 21:09:52

7.继承与多态 对象村的优质生活

7.1 民法亲属篇&#xff1a;继承&#xff08;inheritance&#xff09; 了解继承 在设计继承时&#xff0c;你会把共同的程序代码放在某个类中&#xff0c;然后告诉其他的类说此类是它们的父类。当某个类继承另一个类的时候&#xff0c;也就是子类继承自父类。以Java的方式说&…...

编程日记 2023/10/18 21:08:51

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/12/13 23:14:16

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/12/7 18:08:21

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/12/12 4:15:39

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

Redis——Cluster配置

目录 分片 一、分片的本质与核心价值 二、分片实现方案对比 三、分片算法详解 1. ‌范围分片&#xff08;顺序分片&#xff09;‌ 2. ‌哈希分片‌ 3. ‌虚拟槽分片&#xff08;Redis Cluster 方案&#xff09;‌ 四、Redis Cluster 分片实践要点 五、经典问题解析 C…...

编程新知 2025/12/6 10:14:21

CKA考试知识点分享(2)---ingress

CKA 版本&#xff1a;1.32 第二题是涉及ingress相关。本文不是题目&#xff0c;只是为了学习相关知识点做的实验。 1. 环境准备 需要准备一套K8S集群。 1.1 安装ingress-nginx 下载deploy文件&#xff1a; wget -O controller-v1.12.2.yaml https://raw.githubusercontent…...

编程新知 2025/12/12 19:37:19

django paramiko 跳转登录

在使用Django框架结合Paramiko进行SSH远程操作时&#xff0c;通常涉及到自动化脚本的执行&#xff0c;比如远程服务器上的命令执行、文件传输等。如果你的需求是“跳转登录”&#xff0c;即在登录远程服务器后&#xff0c;再通过该服务器的SSH连接跳转到另一台服务器&#xff0…...

编程新知 2025/9/13 15:44:17