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

css4浮动+清除浮动

news 2025/10/30 22:33:46

浮动

  • 一.常见网页布局
    • 1.三种布局方式
    • 2.布局准则
  • 二.浮动（float）
    • 1.好处
    • 2.概念
    • 3.三大特性
    • 4.使用
    • 5.常见网页布局模板
    • 6.注意点
  • 三.清除浮动
    • 1.why
    • 2.本质
    • 3.语法
    • 4.四种way（后三个都是给父级添加）
    • 清除浮动总结

一.常见网页布局

1.三种布局方式

标准流/普通流/文档流
浮动
定位

2.布局准则

在这里插入图片描述
在这里插入图片描述

二.浮动（float）

1.好处

普通流盒子中间默认有空隙且不知道空隙大小，有些布局普通流做不到，浮动可以方便控制盒子间的空隙

2.概念

在这里插入图片描述

3.三大特性

（1）脱标
在这里插入图片描述
（2）一行内显示且顶端对齐
在这里插入图片描述
（3）具有行内块特征
在这里插入图片描述
在这里插入图片描述

4.使用

在这里插入图片描述

5.常见网页布局模板

在这里插入图片描述
在这里插入图片描述

6.注意点

在这里插入图片描述

三.清除浮动

1.why

在这里插入图片描述

2.本质

在这里插入图片描述

3.语法

在这里插入图片描述

应用
在这里插入图片描述

4.四种way（后三个都是给父级添加）

（1）额外标签法（空标签必须是块级元素）
在这里插入图片描述
在这里插入图片描述

（2）overflow

在这里插入图片描述

（3）：after伪元素发（复制调用）
在这里插入图片描述

（4）双伪元素（复制调用）
在这里插入图片描述

清除浮动总结

在这里插入图片描述

相关文章：

css4浮动+清除浮动

浮动 一.常见网页布局1.三种布局方式2.布局准则 二.浮动（float）1.好处2.概念3.三大特性4.使用5.常见网页布局模板6.注意点 三.清除浮动1.why2.本质3.语法4.四种way（后三个都是给父级添加）清除浮动总结 一.常见网页布局 1.三种布局…...

编程日记 2024/2/27 1:25:48

外包干了3个月，技术倒退明显...

先说情况，大专毕业，18年通过校招进入湖南某软件公司，干了接近6年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…...

编程日记 2024/2/27 1:23:46

STM32控制数码管从0显示到99

首先 先画电路图吧！打开proteus，导入相关器件，绘制电路图。如下：（记得要保存啊！发现模拟一遍程序就自动退出了，有bug，我是解决不了，所以就是要及时保存，自己重…...

编程日记 2024/2/27 1:22:43

【机器学习算法】KNN鸢尾花种类预测案例和特征预处理。全md文档笔记（已分享，附代码）

本系列文章md笔记（已分享）主要讨论机器学习算法相关知识。机器学习算法文章笔记以算法、案例为驱动的学习，伴随浅显易懂的数学知识，让大家掌握机器学习常见算法原理，应用Scikit-learn实现机器学习算法的应用&#xff0…...

编程日记 2024/2/27 1:21:43

Windows 自带的 Linux 子系统(WSL)安装与使用

WSL官网安装教程： https://learn.microsoft.com/zh-cn/windows/wsl/install Windows 自带的Linux子系统，比用VM什么的香太多了。可以自己看官方教程，也可以以下步骤完成。 如果中间遇到我没遇到的问题百度，可以在评论区评论&#…...

编程日记 2024/2/27 1:20:42

C语言--贪吃蛇

目录 1. 实现目标2. 需掌握的技术3. Win32 API介绍控制台程序控制台屏幕上的坐标COORDGetStdHandleGetConsoleCursorinfoCONSOLE_CURSOR_INFOSetConsoleCursorInfoSetConsoleCursorPositionGetAsyncKeyState 4. 贪吃蛇游戏设计与分析地图<locale.h>本地化类项setlocale函…...

编程日记 2024/2/27 1:16:38

原型设计工具Axure RP

Axure RP是一款专业的快速原型设计工具。Axure&#xff08;发音&#xff1a;Ack-sure&#xff09;&#xff0c;代表美国Axure公司&#xff1b;RP则是Rapid Prototyping&#xff08;快速原型&#xff09;的缩写。 下载链接&#xff1a;https://www.axure.com/ 下载 可以免费试用…...

编程日记 2024/2/27 1:15:37

HeadFirst读书笔记

一、设计模式入门 1、使用模式最好的方式“把模式装进脑子里&#xff0c;然后在你的设计和已有的应用中&#xff0c;寻找何处可以使用它们”。以往是代码复用&#xff0c;现在是经验复用。 2、软件开发的一个不变的真理就是变化。 二、设计原则 1、找出应用中可能需要变化之…...

编程日记 2024/2/27 1:14:36

【C++】---内存管理new和delete详解

一、C/C内存分布 C/C内存被分为6个区域&#xff1a; &#xff08;1&#xff09; 内核空间&#xff1a;存放内核代码和环境变量。 &#xff08;2&#xff09;栈区&#xff1a;向下增长&#xff08;存放非静态局部变量&#xff0c;函数参数&#xff0c;返回值等等&#xff09; …...

编程日记 2024/2/27 1:12:33

go-zero微服务入门教程

go-zero微服务入门教程 本教程主要模拟实现用户注册和用户信息查询两个接口。 准备工作 安装基础环境 安装etcd&#xff0c; mysql&#xff0c;redis&#xff0c;建议采用docker安装。 MySQL安装好之后&#xff0c;新建数据库dsms_admin&#xff0c;并新建表sys_user&#…...

编程日记 2024/2/27 1:11:32

蓝桥杯刷题--python-12

3768. 字符串删减 - AcWing题库 nint(input()) sinput() res0 i0 while(i<n): if s[i]x: ji1 while(j<n and s[j]x): j1 resmax(j-i-2,0) ij else: i1 print(res) 3777. 砖块 - AcWing题库 # https://www.a…...

编程日记 2024/2/27 1:04:25

LeetCode LCR 085.括号生成

正整数 n 代表生成括号的对数&#xff0c;请设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 示例 2&#xff1a; 输入&#x…...

编程日记 2024/2/27 1:02:23

抖音视频评论数据提取软件|抖音数据抓取工具

一、开发背景&#xff1a; 在业务需求中&#xff0c;我们经常需要下载抖音视频。然而&#xff0c;在网上找到的视频通常只能通过逐个复制链接的方式进行抓取和下载&#xff0c;这种操作非常耗时。我们希望能够通过关键词自动批量抓取并选择性地下载抖音视频。因此&#xff0c;为…...

编程日记 2024/2/27 0:59:21

【web】云导航项目部署及环境搭建(复杂)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、项目介绍1.1项目环境架构LNMP1.2项目代码说明 二、项目环境搭建2.1 Nginx安装2.2 php安装2.3 nginx配置和php配置2.3.1 修改nginx文件2.3.2 修改vim /etc/p…...

编程日记 2024/2/27 0:58:20

软件测试人员必会的linux命令

文件和目录操作： ● ls：列出目录中的文件和子目录。 ● cd：改变当前工作目录。 ● mkdir：创建新目录。 ● rm：删除文件或目录。 ● cp：复制文件或目录。 ● mv：移动或重命名文件或目录。 文本查看和编辑： ● cat：查看文件内容。 ● more或less：分页查看文件内…...

编程日记 2024/2/27 0:57:19

Mac使用K6工具压测WebSocket

commend空格 打开终端&#xff0c;安装k6 brew install k6验证是否安装成功 k6 version设置日志级别为debug export K6_LOG_LEVELdebug执行脚本&#xff08;进入脚本所在文件夹下&#xff09; k6 run --vus 100 --duration 10m --out csvresult.csv script.js 脚本解释&…...

编程日记 2024/2/27 0:52:13

小程序--vscode配置

要在vscode里开发微信小程序&#xff0c;需要安装以下两个插件&#xff1a; 安装后&#xff0c;即可使用vscode开发微信小程序。 注&#xff1a;若要实现鼠标悬浮提示&#xff0c;则需新建jsconfig.json文件&#xff0c;并进行配置&#xff0c;即可实现。 jsconfig.json内容如…...

编程日记 2024/2/27 0:51:11

linux僵尸进程

僵尸进程&#xff08;Zombie Process&#xff09;是指在一个进程终止时&#xff0c;其父进程尚未调用wait()或waitpid()函数来获取该进程的终止状态信息&#xff0c;导致进程的资源&#xff08;如进程表中的记录&#xff09;仍然保留在系统中的一种状态。 当一个进程结束时&am…...

编程日记 2024/2/27 0:46:03

【web | CTF】攻防世界 Web_php_unserialize

天命&#xff1a;这条反序列化题目也是比较特别&#xff0c;里面的漏洞知识点&#xff0c;在现在的php都被修复了 天命&#xff1a;而且这次反序列化的字符串数量跟其他题目不一样 <?php class Demo { // 初始化给变量内容&#xff0c;也就是当前文件&#xff0c;高亮显示…...

编程日记 2024/2/27 0:45:02

Vue3中的select 的option是多余的？

背景&#xff1a; 通过Vue3中填充一个下拉框&#xff0c;在打开页面时要指定默认选中&#xff0c;并在选项改变时把下拉框的选中值显示出来 问题&#xff1a; 填充通常的作法是设置 <option v-for"option in cities" :value"option.value" >&a…...

编程日记 2024/2/27 0:41:00

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/10/23 11:19:35

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/10/30 22:14:59

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2025/10/28 1:08:56

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/10/30 7:47:14

2025-05-08-deepseek本地化部署

title: 2025-05-08-deepseek 本地化部署 tags: 深度学习 程序开发 2025-05-08-deepseek 本地化部署 参考博客 本地部署 DeepSeek&#xff1a;小白也能轻松搞定&#xff01; 如何给本地部署的 DeepSeek 投喂数据&#xff0c;让他更懂你 [实验目的]&#xff1a;理解系统架构与原…...

编程新知 2025/10/23 14:05:44

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...

编程新知 2025/10/28 16:21:31

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...

编程新知 2025/10/30 22:16:10

【版本控制】GitHub Desktop 入门教程与开源协作全流程解析

目录 0 引言1 GitHub Desktop 入门教程1.1 安装与基础配置1.2 核心功能使用指南仓库管理日常开发流程分支管理 2 GitHub 开源协作流程详解2.1 Fork & Pull Request 模型2.2 完整协作流程步骤步骤 1: Fork&#xff08;创建个人副本&#xff09;步骤 2: Clone&#xff08;克隆…...

编程新知 2025/10/30 20:56:15

智警杯备赛--excel模块

数据透视与图表制作 创建步骤 创建 1.在Excel的插入或者数据标签页下找到数据透视表的按钮 2.将数据放进“请选择单元格区域“中&#xff0c;点击确定 这是最终结果&#xff0c;但是由于环境启不了&#xff0c;这里用的是自己的excel&#xff0c;真实的环境中的excel根据实训…...

编程新知 2025/10/21 21:19:45