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

DIV+CSS网页布局

news 2026/2/10 11:09:27

本文参考

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

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2026/2/5 4:23:32

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45