css4浮动+清除浮动

news2024/10/5 16:30:18

浮动

  • 一.常见网页布局
    • 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)双伪元素(复制调用)
在这里插入图片描述

清除浮动总结

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1469655.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

查看mysql数据库的版本

要查看MySQL数据库的版本,可以使用以下几种方法: 命令行(已连接到MySQL服务器): 登录到MySQL服务器后,在MySQL提示符下执行: mysql> SELECT VERSION(); 或者,也可以执行 STATUS; …

【C++精简版回顾】8.const

1.const数据成员 &#xff08;1&#xff09;const数据成员必须使用初始化参数列表 &#xff08;2&#xff09;不能修改 &#xff08;3&#xff09;不能修改必须初始化 class MM { public:MM() {}MM(int age, string name) :age(age), name(name) {}~MM() {cout << "…

Spring的优点

1.方便解耦&#xff0c;简化开发 Spring就是一个容器&#xff0c;可以将所有对象创建和关系维护交给Spring管理。 2.AOP编程支持 面向切面编程&#xff0c;方便实现程序进行权限拦截&#xff0c;运行监控等功能。 3.声明式事务的支持 通过配置完成事务的管理&#xff0c;…

基于ZYNQ的PCIE高速数据采集卡的设计(四)软件设计,Aurora 协议逻辑设计

系统软件设计 4.1 引言 本章基于第二章的分析结论&#xff0c;进行系统软件设计。软件设计包括逻辑设计、嵌入 式软件设计和上位机软件设计。在逻辑设计中&#xff0c;对 ADC 模块、 Aurora 模块、 DDR3 SDRAM 模块和 PCIE 模块进行分析和设计&#xff0c;在 Vivad…

UI风格汇:扁平化风格来龙去脉,特征与未来趋势

Hello&#xff0c;我是大千UI工场&#xff0c;设计风格是我们新开辟的栏目&#xff0c;主要讲解各类UI风格特征、辨识方法、应用场景、运用方法等&#xff0c;本次带来的扁平化风格的解读&#xff0c;有设计需求&#xff0c;我们也可以接单。 一、什么是扁平化风格 扁平化风格…

全球最受欢迎的DAWFL Studio 21.2.3.4004 中文破解版强悍来袭

1997年是一个「古老」的年代&#xff0c;那时人们还在用「猫」上网&#xff0c;微信、QQ的江湖被ICQ统治&#xff0c;音乐编辑领域 Cool Edit 如日中天。这一年 &#xff0c;FL Studio 的前身 FruityLoops 在比利时问世&#xff0c;26年来&#xff0c;FL已成长为全球最受欢迎的…

LabVIEW变压器振动信号数据采集与分析

LabVIEW变压器振动信号数据采集与分析 随着电力系统的快速发展&#xff0c;对变压器的安全监控和故障诊断需求日益增加。设计了一套基于LabVIEW的变压器振动信号数据采集与分析系统&#xff0c;提高变压器的运行安全性和可靠性&#xff0c;实现对变压器振动信号的实时监测和故…

uniapp上传文件到腾讯云

官方API地址 javaScript_SDK 下载cos npm i cos-js-sdk-v5 --save 生成签名 获取secretId和secretKey let cos new COS({SecretId: *******************************,SecretKey: ******************************,}) 参考文章&#xff1a;腾讯云如何获取secretId和secret…

一台台式电脑的耗电量有多少瓦?你知道吗?

核实后将予以处理。 感谢您为社区和谐做出的贡献。 一般来说&#xff0c;大多数台式电脑的功率在250W左右&#xff0c;也就是每4小时耗一度电。 一般有每小时100W左右的低功耗计算机&#xff0c;也有每小时1000W左右的高功耗计算机。 对于笔记本电脑来说&#xff0c;每小时约为…

手撕Transformer(三)| 基础Transformer整体结构代码解析,从宏观到微观

文章目录 1 理解重点2 背景介绍 假设3 过程及重要组件3.1 嵌入层和加入位置编码3.2 编码器 Encoder3.3.1 EncoderLayer编码层3.3.2 LayerNorm归一化层 3.3 解码器 Decoder3.4 整合连接Encoder和Decoder 4 完整可运行代码 1 理解重点 在之前一节我们已经介绍了Transformer的位置…

精品基于springboot的线上辅导班系统的开发与设计-课程报名

《[含文档PPT源码等]精品基于springboot的线上辅导班系统的开发与设计[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#…

[嵌入式系统-33]:RT-Thread -18- 新手指南:三种不同的版本、三阶段学习路径

目录 前言&#xff1a;学习路径&#xff1a;入门学习-》进阶段学习》应用开发 一、RT-Thread版本 1.1 标准版 1.2 Nano 1.3 Smart版本 1.4 初学者制定学习路线 1.5 RT-Thread在线文档中心目录结构 1.6 学习和使用RT-Thread的三种场景 二、入门学习阶段&#xff1a;内…

Semaphore实现原理全面解析

简介 Semaphore&#xff08;信号量&#xff09;是一个同步工具类&#xff0c;通过Semaphore可以控制同时访问共享资源的线程个数。 应用场景 Semaphore的主要应用场景&#xff1a; 资源并发控制&#xff1a;Semaphore可以限制对资源的并发访问。如&#xff1a;管理数据库连…

蛇形矩阵2

题目描述 把数1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;…&#xff0c;按照“蛇形2”放入N*N矩阵的左三角形中&#xff0c;输出结果。 下面是N6的蛇形2的图示 输入格式 第一行1个正整数&#xff1a;N&#xff0c;范围在[1,100]。 输出格式 N行&a…

HuggingFists系统功能介绍(3)--流程管理

流程管理 下面我们进入流程管理。流程管理用于定义及管理我们采用低代码方式开发的各种ETL以及数据分析流程。 流程列表 界面的左侧部分为流程的分组树&#xff0c;当定义的流程逐渐变多或者多人协同使用系统时&#xff0c;可以通过分组对流程进行更有序的管理。点中分组&#…

C#与VisionPro联合开发——TCP/IP通信

TCP/IP&#xff08;传输控制协议/互联网协议&#xff09;是一组用于在网络上进行通信的通信协议。它是互联网和许多局域网的基础&#xff0c;为计算机之间的数据传输提供了可靠性、有序性和错误检测。在软件开发中&#xff0c;TCP/IP 通信通常用于实现网络应用程序之间的数据交…

预训练-微调范式在人工智能领域的深远影响

预训练-微调范式的出现是人工智能领域的一大里程碑&#xff0c;它深刻改变了深度学习模型的训练方式和应用模式&#xff0c;并对整个行业产生了多方面的深远影响&#xff1a; 数据效率提升&#xff1a; 通过在大规模无标注数据上进行预训练&#xff0c;模型能够学习到丰富的语言…

Python算法题集_实现 Trie [前缀树]

Python算法题集_实现 Trie [前缀树] 题208&#xff1a;实现 Trie (前缀树)1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【定义数据类默认字典】2) 改进版一【初始化字典无额外类】3) 改进版二【字典保存结尾信息无额外类】 4. 最优算法5. 相关…

实战一个 Jenkins 构建 CI/CD流水线 的简单配置过程哈

引言&#xff1a;上一期我们讲述了gitlabCI/CD工具的介绍&#xff0c;工具之争&#xff0c;本期我们介绍Jenkins CI/CD 目录 一、Jenkins介绍 1、Jenkins概念 2、Jenkins目的 3、特性 4、产品发布流程 二、安装Jenkins 1、安装JDK 2、安装Jenkins 1、上传压缩包 2、…

Python入门必学:单引号、双引号与三引号的差异与应用

Python入门必学&#xff1a;单引号、双引号与三引号的差异与应用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 &#x1f448; 希望得…