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://xiahunao.cn/news/2799372.html

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

相关文章

【elasticsearch实战】知识库文件系统检索工具FSCrawler

需求背景 最近有一个需求需要建设一个知识库文档检索系统,这些知识库物料附件的文档居多,有较多文档格式如:PDF, Open Office, MS Office等,需要将这些格式的文件转化成文本格式,写入elasticsearch 的全文检索索引&am…

http协议工具:apache详解

目录 一、常见的http服务程序 1、 Apache HTTP Server 介绍 1.1 apache 概念 1.2 apache 功能 1.3 apache 特性 2、MPM(multi-processing module)工作模式 2.1 prefork 2.2 worker 2.3 event 二、Apache HTTP Server安装和相关文件 1、安装方…

WPF 启动项目 Grid、StackPanel 布局

WPF 启动项目 <!--x:Class"WPF_Study.App" 对应类&#xff1a;WPF_Study.App--> <!--xmlns:local"clr-namespace:WPF_Study" 命名空间&#xff1a;WPF_Study--> <Application x:Class"WPF_Study.App"xmlns"http://schema…

Centos stream9 环境使用脚本部署LAMP,实现wordpress

本人将所需要的rpm包都下载完成之后&#xff0c;直接使用脚本的形式安装。 如果需要自己下载rpm包的话&#xff0c;请下载如下包 yum install -y libxml2-devel \ tar \ gcc \ expat-devel \ bzip2-devel \ pcre-devel \ openssl-devel \ perl-devel \ sqlite-devel \ libcur…

CS_Smb_Beacon上线不出网机器

当我们想上线不出网的机器的时候&#xff0c;我们可以通过上传工具来实现&#xff0c;但是有没有不用上传工具的方法呢&#xff1f;&#xff1f;&#xff1f; 有&#xff01;&#xff01;&#xff01; 而且cs会自带&#xff01;&#xff01;&#xff01; 1.基础的网络拓扑 以下…

抽象工厂模式 Abstract Factory

1.模式定义: 提供一个创建一系列相关或互相依赖对象的接口&#xff0c;而无需指定它们具体的类 2. 应用场景: 程序需要处理不同系列的相关产品&#xff0c;但是您不希望它依赖于这些产品的 具体类时&#xff0c; 可以使用抽象工厂 3.优点: 1.可以确信你从工厂得到的产品彼…

nuxt项目搭建

1.先下载nuxt脚手架 yarn create nuxt-app <项目名>&#xff0c;记得安装完项目&#xff0c;npm i,下载node包 目录介绍 components 存放组件分别是头部&#xff08;包含导航&#xff09;和底部 layouts 页面布局&#xff0c;实现一个页面整体架构规则&#xff0c;头…

读书笔记-增强型分析:AI驱动的数据分析、业务决策与案例实践

目录 前言 运用人工智能技术&#xff0c;可以使人类社会变得更美好。人们总是期待产品更适合、服务更贴心、生活更便利。在实践中&#xff0c;技术给企业赋能&#xff0c;企业通过优质的产品和服务满足社会&#xff0c;提升人类福祉。很多金融企业已经开始尝试向潜在客户推送…

【Java系列】JDK 1.8 新特性之 Lambda表达式

目录 1、Lambda表达式介绍2、从匿名类到Lambda转换3、Lambda表达式 六种语法格式语法格式一&#xff1a;无参数、无返回值&#xff0c;只需要一个Lambda体语法格式二&#xff1a;lambda有一个参数、无返回值​语法格式三&#xff1a;Lambda只有一个参数时&#xff0c;可以省略&…

golang通过http访问外部网址

不同项目之前,通过http访问,进行数据沟通 先设定一个接口,确认外部能访问到 PHP写一个接口 public function ceshi_return() {$data $this->request->param();$id $data[id];$res Db::name(user)->field(id,status,price,name)->where([id>$id])->find…

eclipse做NC开发选择nchome后,测试连不通

在bin文件下的config.bat里却又能够连通数据库&#xff0c;在eclipse却不行。 可能是jdk选择的问题&#xff0c;把jdk改成home自带的jdk

【关于深度学习的一些资料】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 动手学深度学习Awesome Deep LearningTensorFlow Official ModelsPyTorch Image ModelsDeep Reinforcement LearningNeural Style Transfer 动手学深度学习 动手学深度学习 https://zh.d2l.ai/chapter_installation/index.…

嵌入式学习-qt-Day2

嵌入式学习-qt-Day2 一、思维导图 二、作业 1.使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 2.将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账…

小程序--引入vant组件库

一、npm初始化 在微信开发者工具中打开终端&#xff0c;输入npm init&#xff0c;对npm进行初始化 二、安装vant组件库 npm install vant/weapp 三、修改app.json 修改 app.json&#xff0c;移除全局配置 "style": "v2"&#xff0c;否则 Vant 组件的样式…

记一次 .NET某列控连锁系统 崩溃分析

一&#xff1a;背景 1. 讲故事 过年喝了不少酒&#xff0c;脑子不灵光了&#xff0c;停了将近一个月没写博客&#xff0c;今天就当新年开工写一篇吧。 去年年初有位朋友找到我&#xff0c;说他们的系统会偶发性崩溃&#xff0c;在网上也发了不少帖子求助&#xff0c;没找到自…

Android 浅色皮肤阴影开发

前言&#xff1a;项目中要进行浅色皮肤开发&#xff0c;然后要求要有阴影效果&#xff0c;下面是UI觉得可行的中立方案效果 尝试一、使用elevation添加阴影发现效果一般 尝试二、使用带阴影的UI切图后续发现成本太大&#xff0c;对后续多个皮肤适配要求太大 尝试三、使用elevat…

Adobe将类ChatGPT集成到PDF中

2月21日&#xff0c;全球多媒体巨头Adobe在官网宣布&#xff0c;推出生成式AI助手AI Assistant&#xff0c;并将其集成在Reader 和Acrobat 两款PDF阅读器中。 据悉&#xff0c;AI Assistant的功能与ChatGPT相似&#xff0c;可以基于PDF文档提供摘要、核心见解、基于文档内容&a…

CSS 函数详解url、min、rgb、blur、scale、rotate、translate等

随着技术的不断进步&#xff0c;CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力&#xff0c;还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数&#xff0c;逐一剖析它们的功能和用法&#xff0c;一…

乡镇街道档案包括哪些内容

乡镇街道档案是指记录乡镇街道行政区域内的各种信息、数据和文献资料的档案。乡镇街道档案通常包括以下内容&#xff1a; 1. 行政管理档案&#xff1a;包括乡镇街道的组织机构、人员编制、管理制度等方面的档案资料。 2. 经济发展档案&#xff1a;记录乡镇街道的经济发展情况&a…

一个简单的mysql绕过

一、环境代码 上一个环境的demo文件 二、ctf技巧 代码先进入&#xff0c;到chr转换为英文&#xff0c;之后连接到hehe后面&#xff0c;假设我连接了一个&#xff0c;接下来就回去demo中查找hehe&#xff0c;如果name是hehe就输出&#xff0c;意思就是只认前面的hehe后面的会被…