css4浮动+清除浮动

news/发布时间2024/5/15 19:53:47

浮动

  • 一.常见网页布局
    • 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.bcls.cn/EUYW/8100.shtml

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

相关文章

vue+element UI中给指定日期添加标记

1.日期控件中添加:picker-options属性&#xff0c;即:picker-options“myPickerOptions” <el-date-picker:class"item.scds !null ?xtsjBlue:xtsjRed"v-model"item.date"value-format"yyyy-MM-dd"type"date":picker-options"…

PHY6222系统级SOC蓝牙芯片低功耗高性能蓝牙MESH组网智能家居

简介 PHY6222是一款支持BLE 5.2功能和IEEE 802.15.4通信协议的系统级芯片&#xff08;SoC&#xff09;&#xff0c;集成了超低功耗的高性能多模射频收发机&#xff0c;搭载32-bit ARM?Cortex?-M0处理器&#xff0c;提供64K retention SRAM、可选128K-8M Flash、96KB ROM以及2…

贪心算法学习

贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。贪心算法在有最优子结构的问题中尤为有效。然而&#xff0c;要注意的是贪心…

jenkins报错:Pseudo-terminal will not be allocated because stdin is not a terminal

jenkins的流水线部分代码如下 sh ssh root192.168.2.234 << remotessh cd /var/lib/jenkins/workspace/testxkc /usr/local/maven/apache-maven-3.8.6/bin/mvn clean package -U ls remotessh在流水线中尽量使用&#xff1a;remotessh进行伪终端登录&#xff0c;要是使用…

HTTPS保证传输安全有哪些关键点

网络安全问题是当今数字化时代不容忽视的问题。在这个信息爆炸的时代&#xff0c;大量的敏感信息需要在线传输&#xff0c;而用户的隐私也越来越受到关注。为了确保数据在传输过程中的安全性&#xff0c;HTTPS&#xff08;Hyper Text Transfer Protocol Secure&#xff09;应运…

docker 拉取tomcat 访问提示404

访问首页 404 1、docker pull tomcat 默认是拉取最新版的tomcat 2、现在最新版的tomcat 的 首页目录 有原来的 webapps 的内容 放在 webapps.dist 了 所有需要 把webapps 删除&#xff0c; rm -rf webapps&#xff0c; 在把webapps.dist 重命名 mv webapps.dist webapps. …

Linux系统——Nginx拓展

目录 一、重写功能——rewrite 1.if 1.1 if 2. return 2.1状态码301和302的区别 301 302 3. set 4. break 5. rewrite 5.1 rewrite flag使用 5.2 flag说明 5.3举例 5.3.1访问 bj 跳转 beijing 5.3.2举例——break 5.3.3 http 转 https 5.3.4 break 与 last …

基于Keil的RTE(run time environment)配置GD32开发环境,移植FreeRTOS

前言&#xff1a; 10多年前就用STM32了&#xff0c;最近从STM32转到GD32&#xff0c;感觉国产的芯片发展是真的快&#xff0c;不但更便宜&#xff0c;还更快更好用了&#xff08;是在是受不了STM32 I2C BUSY的那个BUG&#xff09;。 先说下&#xff0c;实际上STM32的程序可以…

Vue + Echarts页面内存占用高问题解决

Vue Echarts页面内存占用高问题解决 1.问题描述 目前使用的是Vue2 Echarts4.x的组合&#xff0c;页面如下所示。 就是一个类似于神策的数据看板页面&#xff0c;左侧是一个导航栏&#xff0c;右侧看板页面中包含很多个报表图片&#xff0c;其中报表页面中对Echarts图表进…

科技论文编写思路

科技论文编写思路 1.基本框架2.课题可行性评估1.研究目标和意义2.研究方法和技术3.可行性和可操作性4.风险和不确定性5.经济性和资源投入6.成果预期和评估 3.写作思路4.利用AI读论文5.实验流程 1.基本框架 IntroductionRelated worksMethodExperiment and analysisDiscussionC…

opencv判断灰化情况

目的 先说说理论&#xff1a; 在图像处理中&#xff0c;用RGB三个分量&#xff08;R&#xff1a;Red&#xff0c;G&#xff1a;Green&#xff0c;B&#xff1a;Blue&#xff09;&#xff0c;即红、绿、蓝三原色来表示真彩色&#xff0c;R分量&#xff0c;G分量&#xff0c;B分…

CKA认证,开启您的云原生之旅!

在当今数字化时代&#xff0c;云计算已经成为企业和个人发展的关键技术。而获得CKA&#xff08;Certified Kubernetes Administrator&#xff09;认证&#xff0c;将是您在云原生领域迈出的重要一步。 CKA认证是由Kubernetes官方推出的权威认证&#xff0c;它旨在验证您在Kuber…

基于SpringBoot+Apache ECharts的前后端分离外卖项目-苍穹外卖(十八)

数据展示 1. Apache ECharts1.1 介绍1.2 入门案例 2. 营业额统计2.1 需求分析和设计2.1.1 产品原型2.1.2 接口设计 2.2 代码开发2.2.1 VO设计2.2.2 Controller层2.2.3 Service层接口2.2.4 Service层实现类2.2.5 Mapper层 2.3 功能测试 3. 用户统计3.1 需求分析和设计3.1.1 产品…

java springmvc/springboot 项目通过HttpServletRequest对象获取请求体body工具类

请求 测试接口 获取到的 获取到打印出的json字符串里有空格这些&#xff0c;在json解析的时候正常解析为json对象了。 工具类代码 import lombok.extern.slf4j.Slf4j; import org.springframework.web.context.request.RequestContextHolder; import org.springframework.we…

2023 龙蜥操作系统大会演讲实录:《兼容龙蜥的云原生大模型数据计算系统——πDataCS》

本文主要分三部分内容&#xff1a;第一部分介绍拓数派公司&#xff0c;第二部分介绍 πDataCS 产品&#xff0c;最后介绍 πDataCS 与龙蜥在生态上的合作。 杭州拓数派科技发展有限公司&#xff08;简称“拓数派”&#xff0c;英文名称“OpenPie”&#xff09;是国内基础数据计…

论文阅读:SOLOv2: Dynamic, Faster and Stronger

目录 概要 Motivation 整体架构流程 技术细节 小结 论文地址&#xff1a;[2003.10152] SOLOv2: Dynamic and Fast Instance Segmentation (arxiv.org) 代码地址&#xff1a;GitHub - WXinlong/SOLO: SOLO and SOLOv2 for instance segmentation, ECCV 2020 & NeurIPS…

zabbix3.4.6 源码安装

Step1&#xff1a; 下载 https://www.zabbix.com/download 选中一下。download Zabbix Sources PackageReleaseDateRelease NotesZabbix ManualDownloadZabbix 3.4Server, Proxy, Agent, GUI3.4.615 January, 2018 Download step2 &#xff1a;拷贝在redhat 6.3_X86_86(192…

js:通过input标签或Drag拖拽文件实现浏览器文件上传获取File文件对象

文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Filehttps://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/drag_event 通过读取文件可以获取File对象的信息 lastModified: 1707210706000 lastModifiedDate: Tue Feb 06 2024 17:11:46 GMT0800 (中国标准…

11:日志分析系统ELK|Elasticsearch|kibana

日志分析系统ELK&#xff5c;Elasticsearch&#xff5c;kibana 日志分析系统ELKELK概述Elasticsearch安装Elasticsearch部署Elasticsearch集群Elasticsearch插件 熟悉Elasticsearch的API调用_cat API创建 tedu 索引使用 PUT 方式增加数据查询数据修改数据删除数据 KibanaKibana…

MATLAB环境下基于图像处理的视网膜图像血管分割

预防糖尿病对每个人的健康至关重要&#xff0c;而糖尿病的早期症状在眼底视网膜血管会有所体现&#xff0c;如静脉血管扩张、轻度弯曲等。高血压作为常见疾病&#xff0c;在中国有多达2.45亿的患者。高血压的病情也会在眼底视网膜血管上有所体现&#xff0c;如交叉压迫征等反映…
推荐文章