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

DIV+CSS网页布局

news 2025/10/28 21:10:01

本文参考

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/10/28 8:04:49

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/10/28 1:05:27

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/10/22 9:33:26

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/10/18 14:46:44

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/9/30 14:27:04

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/10/27 7:01:16

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/10/19 17:15:36

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2025/10/24 13:31:15

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2025/10/23 12:13:24