css4浮动+清除浮动

浮动

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

清除浮动总结

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[java基础揉碎]this

引出this: 什么是this: java虚拟机会给每个对象分配 this,代表当前对象。 这里的this就是new出来的这个对象 this的本质: this是个引用在堆中指向它自己: this的细节: 访问成员方法: 访问构造器:

DPDK应该如何入门学习?

01 写在前面 我的读者当中应该有一部分人是做 DPDK 相关的,我自己虽然现在已经不做 DPDK 了,但对这块仍然有兴趣,今天这篇文章就来总结下 DPDK 的技术栈。注意:这篇文章是小白文,不适合大神哦。 文章从 DPDK 的产生背…

实战打靶集锦-025-HackInOS

文章目录 1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查5. 提权5.1 枚举系统信息5.2 探索一下passwd5.3 枚举可执行文件5.4 查看capabilities位5.5 目录探索5.6 枚举定时任务5.7 Linpeas提权 靶机地址:https://download.vulnhub.com/hackinos/HackInOS.ova 1. 主机…

【PyTorch][chapter 17][李宏毅深度学习]【无监督学习][ Auto-encoder]

前言: 本篇重点介绍AE(Auto-Encoder) 自编码器。这是深度学习的一个核心模型. 自编码网络是一种基于无监督学习方法的生成类模型,自编码最大特征输出等于输入 Yann LeCun&Bengio, Hinton 对无监督学习的看法. 目录: AE 模型原…

华为笔记本原厂系统镜像恢复安装教程方法

1.安装方法有两种,一种是用PE安装,一种是华为工厂包安装(安装完成自带F10智能还原) 若没有原装系统文件,请在这里远程恢复安装:https://pan.baidu.com/s/166gtt2okmMmuPUL1Fo3Gpg?pwdm64f 提取码:m64f …

跳表是一种什么样的数据结构

跳表是有序集合的底层数据结构,它其实是链表的一种进化体。正常链表是一个接着一个用指针连起来的,但这样查找效率低只有O(n),为了解决这个问题,提出了跳表,实际上就是增加了高级索引。朴素的跳表指针是单向的并且元素…

关于Linux中使用退格键出现^H的问题解决

关于Linux中使用退格键出现^H的问题解决 今天在Linux下执行脚本和监听端口的输入时候,不小心输错内容想要删除用退格键发现变成了^H,从网上查了资料并且实际应用了一下(我的虚拟机是CentOS7)。 使用ctrl退格键即可成功删除内容 …

mysql 锁详解

目录 前言 一、全局锁 二、表级锁 三、行锁 前言 为什么要设计锁,锁设计初衷是为了解决多线程下并发问题。出现并发的时候用锁进行数据同步,避免因并发造成了数据错误(数据覆盖)。可见锁的重要性,并不是所有的数据库都有锁。比如Redis&a…

CSB ---> (XXE)XML基础

本来今天想更一下CSbeacon上线多层的内网机器的,但是刚好今天是年后的第一节课,讲的是XXE的基础,那就来先盘一下基础!! 1.XXE XXE全称是XML External Entity即xml外部实体注入攻击!其后果会导致用户…

【深入理解设计模式】 工厂设计模式

工厂设计模式 工厂设计模式是一种创建型设计模式,它提供了一种在不指定具体类的情况下创建对象的接口。在工厂设计模式中,我们定义一个创建对象的接口,让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。 工厂设计模式的目…

锗化硅(SiGe)和硅(Si)之间的各向同性和选择性蚀刻机制

引言 目前,硅的电气和热性能在微电子技术领域中应用广泛。锗化硅(SiGe)合金的使用频率越来越高,在互补金属氧化物半导体技术中,英思特通过使用SON结构以及进行各向同性刻蚀,将该工艺扩展到对Si进行Si选择性…

angular-引用本地json文件

angular-引用json文件,本地模拟数据时使用 在assets目录下存放json文件 大佬们的说法是:angular配置限定了资源文件的所在地(就是assets的路径),放在其他文件夹中,angular在编译过程中会忽略,会…

Spring Security学习(六)——配置多个Provider(存在两种认证规则)

前言 《Spring Security学习(五)——账号密码的存取》一文已经能满足一般应用的情况。但实际商业应用也会存在如下的情况:用户提交的账号密码,能在本地的保存的账号密码匹配上,或者能在远端服务认证中匹配上&#xff…

ubuntu22.04@Jetson Orin Nano之CSI IMX219安装

ubuntu22.04Jetson Orin Nano之CSI IMX219安装 1. 源由2. 安装2.1 硬件安装2.2 软件配置2.3 新增摄像头 3. 效果4. 参考资料 1. 源由 折腾半天时间,捣鼓这个套装摄像头(IMX219)的安装,死活就是没有这个设备。世界总是这么小,看看遇到问题的大…

SpringCloud-Gateway网关的使用

本文介绍如何再 SpringCloud 项目中引入 Gateway 网关并完成网关服务的调用。Gateway 网关是一个在微服务架构中起到入口和路由控制的关键组件。它负责处理客户端请求,进行路由决策,并将请求转发到相应的微服务。Gateway 网关还可以实现负载均衡、安全认…

代码随想录Leetcode 343. 整数拆分

题目&#xff1a; 代码(首刷看解析 2024年2月21日&#xff09;&#xff1a; dp[i]表示i所能拆分的最大乘积&#xff0c;则dp[i] 与dp[i - 1]的递推公式是&#xff1a; max( 1~n * dp[n ~ 1]) class Solution { public:int integerBreak(int n) {vector<int> dp(n 1);dp…

[ai笔记11] 论ai韭菜的自我修养

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵学习ai以及观点分享的第11篇内容&#xff01; 上班之后时间确实少了许多&#xff0c;但是最近也没闲着&#xff0c;关于ai的学习一直在探索两个部分&#xff0c;一个是看那本有名的书《这就是ChatGPT》&#xff0c;另外一个则…

YOLOv5代码解读[02] models/yolov5l.yaml文件解析

文章目录 YOLOv5代码解读[02] models/yolov5l.yaml文件解析yolov5l.yaml文件检测头1--->耦合头检测头2--->解耦头检测头3--->ASFF检测头Model类解析parse_model函数 YOLOv5代码解读[02] models/yolov5l.yaml文件解析 yolov5l.yaml文件 # YOLOv5 &#x1f680; by Ult…

PotPlayer+Alist挂载并播放网盘视频

文章目录 说明技术WebDAVPotPlayer 操作步骤一&#xff1a;Alist开启WebDAV代理二&#xff1a;PotPlayer连接Alist 说明 Alist网页端播放视频受限&#xff0c;主要是文件大于20MB&#xff0c;由于官方限制&#xff0c;无法播放需要使用user-agent修改插件&#xff0c;设置百度…

2024.2.21 C++QT 作业

思维导图 练习题 1>使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数&#xff0c;将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"…