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)双伪元素(复制调用)
在这里插入图片描述

清除浮动总结

在这里插入图片描述

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

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

相关文章

终端启动jupyter notebook更换端口

一、问题描述 如果尝试在端口 8889 上启动 Jupyter Notebook 但最终启动在了 8890 端口,这通常意味着 8889 端口已经被占用。要解决这个问题,可以尝试以下几种方法来关闭占用 8889 端口的进程。 1. 查找并终止占用端口的进程 首先,需要找出…

课时45:表达式_表达式_字符串表达式

3.2.3 字符串表达式 学习目标 这一节,我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 简介 所谓的字符串表达式,主要是判断 比较运算符 两侧的值的内容是否一致,由于bash属于弱类型语言,所以,默认情况…

【课程作业】提取图中苹果的面积、周长和最小外接矩形的python、matlab和c++代码

提取图中苹果的面积、周长和最小外接矩形 在图像处理中,提取对象的关键属性是常见的任务之一。本文将演示如何使用三种流行的编程语言——Python、Matlab和C,利用相应的图像处理库(OpenCV或Matlab内置函数)来提取图像中苹果的面积…

Java8 Stream API 详解:流式编程进行数据处理

🏷️个人主页:牵着猫散步的鼠鼠 🏷️系列专栏:Java全栈-专栏 🏷️个人学习笔记,若有缺误,欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默&…

切比雪夫(最小区域法)平面拟合算法

欢迎关注更多精彩 关注我,学习常用算法与数据结构,一题多解,降维打击。 本期话题:切比雪夫(最小区域法)平面拟合算法 相关背景和理论 点击前往 主要介绍了应用背景和如何转化成线性规划问题 平拟合输入和…

Vue2:多级路由案例

一、情景说明 上一节,我们学习了Vue中的路由功能 但是,只是基础的一级路由 在实际生产中,路径不可能只有一级,一般都有3,4层级 二、案例 1、修改路由器文件 index.js 新增两个组件 这里实现二级路由配置 关键配置:…

命题逻辑|析取、合取和蕴含到底什么意思

如是我闻:在逻辑学中,“析取”、“合取”和“蕴含”这些术语的中文翻译是有其逻辑和哲学基础的,它们准确地反映了这些逻辑操作的本质。虽然他们被翻译的很高级,但并不能让人一下子就明白。 析取 (Disjunction) 原理:…

【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 << "…

SpringBoot和ApiFox整合快速上手

前置&#xff1a;IDEA版本IntelliJ IDEA 2023.2.4&#xff0c;Apifox 2.5.6 安装插件&#xff1a;Apifox Helper1.2.1 目录 1.文档生成 2.提取登录接口token 1.文档生成 把密钥配置到 导入成功:文档就会出现 2.提取登录接口token 之后我们再使用的时候&#xff0c;只需要配置…

面试整理(昆明)去面试就更新

1.MyBatis与MyBatis-Plus的区别&#xff1f; MyBatis和MyBatis-Plus都是Java语言中非常常用的ORM框架&#xff0c;二者有以下区别&#xff1a; 1.实现方式不同 MyBatis是基于XML或注解方式进行数据库操作的持久化框架&#xff0c;它提供了简单的CRUD操作及动态SQL生成等功能。…

五个使用Delphi语言进行开发的案例

案例一&#xff1a;学生信息管理系统 某学校需要开发一个学生信息管理系统&#xff0c;用于记录学生的基本信息、成绩和考勤情况等。开发者使用Delphi语言进行开发&#xff0c;设计了一个包含多个窗体的应用程序。主窗体用于展示学生的列表和基本信息&#xff0c;其他窗体则用…

2024.2.25 -ElasticSearch 进阶

倒排索引 Elasticsearch的倒排索引机制是通过将文档中出现的词汇与它们所在的文档ID关联起来&#xff0c;实现快速查找包含特定词汇的文档。下面是一个具体的例子来说明倒排索引的工作原理&#xff1a; 假设我们有一个简单的文章集合&#xff0c;包含以下三篇文章&#xff1a…

Java学习——泛型

Java泛型是Java语言中的一个特性&#xff0c;它允许你在类、接口和方法上定义类型参数。使用泛型可以使代码更加通用&#xff0c;减少代码重复&#xff0c;并在编译时提供更强的类型检查。下面分别介绍泛型类、泛型方法和泛型接口。 泛型类 泛型类是在类名后添加类型参数声明…

ap和ac的工作原理

让我们一步步解释无线网络中访问点 (AP) 和无线控制器 (AC) 的工作原理&#xff1a; 1. 访问点 (AP)&#xff1a; 访问点是无线局域网络 (WLAN) 中的关键组件之一&#xff0c;它充当无线设备&#xff08;如笔记本电脑、智能手机等&#xff09;和有线网络之间的桥梁。其工作原理…

Oracle开发和应用——PL/SQL语法2(游标及集合)

6.4.6. 游标 这里的游标(cursor),是指数据库开发中的游标,而且,这里所指的是显式定义的游标。因为,除了显式定义的游标,我们每条SQL语句也会隐式的定义、打开和关闭一个游标,其实质是一个带有指针的结果集。当我们按照顺序取出结果时,这个指针会按照从前到后的顺序移…

990-09产品经理:How project management benefits different teams 项目管理如何使不同的团队受益

Project management methods and tools can be deployed across all teams and industries to help improve efficiency and drive results. In this chapter, we’ll provide an overview of how PM benefits construction, IT, marketing, and operations teams. 项目管理方法…

解锁苏宁电商数据新纪元:关键字搜索API接口引领业务升级

苏宁关键字搜索API接口&#xff1a;电商数据探索的新篇章 一、引言 在电商领域&#xff0c;数据的重要性不言而喻。为了帮助开发者更高效地获取和利用电商数据&#xff0c;苏宁开放平台提供了关键字搜索API接口。本文将带你深入了解这一接口的技术细节&#xff0c;让你在电商…

如何获取pnpm存储目录

现在你可以做 得到&#xff1a;\path\to.pnpm-store\v3 pnpm store path注&#xff1a;从v7.0.0开始&#xff0c;pnpm 存储位于不同的文件夹中。它将位于$XDG_DATA_HOMELinux Linux : ~/.local/share/pnpm/store (default) Windows : C:\Users\YOUR_NAME\AppData\Local\pn…

设计模式--单例模式--懒汉饿汉

单例模式 单例模式(Singleton)&#xff0c;保证一个类仅有一个实例&#xff0c;并提供一个访问它的全局访问点。 单例模式 通常我们可以让一个全局变量使得一个对象被访问&#xff0c;但它不能防止你实例化多个对象。一个最好的办法就是&#xff0c;让类自身负责保存它的唯一实…

selenium自动化测试如何定位一闪而过的元素,比如提示信息、提交按钮

这里以登录按钮为例 在当前页面按F12点击控制,在下方输入debugger&#xff0c;点击登录按钮后点击输入debugger的地方按回车&#xff0c;一闪而过的元素就会定住不动就可以定位了