CSS之浮动

目录

  • 浮动
    • 常见网页布局
    • 标准流(普通流、文档流)
    • 为什么需要浮动
    • 什么是浮动
    • 浮动特性(重难)
    • 注意:
    • 清除浮动

浮动

常见网页布局

  1. 本质:用CSS来摆放盒子,把盒子摆放到相应的位置
    三种常见布局方式:普通流(标准流)、浮动、定位
  2. 浮动常见布局:
    在这里插入图片描述

在这里插入图片描述

标准流(普通流、文档流)

即标签按照默认方式排列eg:块级元素独占一行、行内元素按顺序排列
最基本的布局方式

为什么需要浮动

网页浮动第一准则:多级块元素纵向排列标准流横向排列浮动

什么是浮动

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
在这里插入图片描述

浮动特性(重难)

  1. 脱标:浮动元素会脱离标准流,控制(浮)移动到指定位置(动),浮动的盒子不再保留原先位置
  2. 行显示:如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
  3. 具有行内块元素的属性,任何元素都可以浮动,不管原先是什么模式的元素,浮动后都具有行内块元素的特点,不需要转换模式
    tips:
    ①如果块级元素没有设置宽度,默认宽度和父级相同,添加浮动后,它的大小根据内容决定
    ②浮动的元素是互相间贴在一起的,没有缝隙,如果父级元素放不下这些元素,则会换行放置

注意:

  1. 浮动元素经常和标准流父级搭配使用
    约束浮动元素位置,采取的一般策略是:先用标准流父级元素排列上下位置,内部子元素采取浮动排列左右位置,符合网页布局第一准则
  2. 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

清除浮动

  1. 为什么?当父盒子不方便给高度,子盒子浮动又不占位置,是的父盒子高度为零,从而影响下面的标准流盒子

  2. 本质:清楚浮动元素造成的影响

  3. 语法格式:

    选择器 {clear: 属性值;
    }
    

    在这里插入图片描述

  4. 清除浮动的策略:闭合浮动

  5. 清除浮动方法:

    • 额外标签法:隔墙法
      在浮动元素的末尾添加一个空标签,这个空标签必须是块级元素,eg:<div style="clear:both"></div>,或者<br/>
      书写方便但会添加许多无意义的标签
    • 父级添加overflow属性
      给父级添加overflow属性,将其属性值设为hidden、auto、或scroll
      代码简洁但无法显示溢出部分
    • 父级添加after伪元素
      额外标签法的升级版
      语法格式:
    .clearfix:after {content: "";display:block;height:0;clear:both;visibility: hidden;
    }
    .clearfix {//IE6、7专有*zoom:1;
    }
    

    没有增加标签,结构更简单

    • 父级添加双伪元素
      给父元素添加
    .clearfix:before,
    .clearfix:after {content:"";display:table;
    }
    .clearfix:after {clear:both;
    }
    .clearfix {*zoom:1;
    }
    

    总结:在这里插入图片描述

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

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

相关文章

【亚马逊云】注册APN账号及报考AWS认证考试说明演示

文章目录 1. 登录AWS网站2. 注册APN账号3. 更改APN账号密码&#xff08;选&#xff09;4. 修改APN账号信息&#xff08;选&#xff09;5. 查看AWS认证情况&#xff08;选&#xff09;6. AWS认证考试报名流程7. 修改报名控制台语言版本&#xff08;选&#xff09;8. 开始报名AWS…

首战告捷!KCM Trade漂移队出征2024日本漂移锦标赛(FDJ2)

卓越之姿&#xff0c;非凡之势&#xff01;KCM Trade漂移队以实力点燃激情 当激情与速度交织&#xff0c;当硝烟四起的战场转移到赛车领域&#xff0c;我们见证了一场精彩绝伦、实力与策略并存的较量——KCM Trade漂移队在2024日本漂移锦标赛&#xff08;FDJ2&#xff09;上展现…

专项培训:实在智能携手中国总会计师协会,共襄金融行业数字化转型

6月19日—23日&#xff0c;中国总会计师协会即将在浙江杭州举办“基于大模型的 AI Agent数字员工在金融行业实践应用专项培训”。本次培训旨在深入探讨和实践人工智能技术在金融行业的应用&#xff0c;推动金融行业的智能化和高效化发展。 作为本次培训的协办单位&#xff0c;…

软考--软件设计师--试题六--工厂方法模式(Factory Method)

工厂方法模式(Factory Method) 1、意图 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪儿一个类&#xff0c;factory method使一个类的实例化延迟到其子类。 2、结构 3、适用性 a、当一个类不知道它所必须创建的对象的类的时候。 b、当一个类希望由它的子类来指定…

第二证券股市技巧|港股交易规则有哪些?

港股商场作为全球首要的股票商场之一&#xff0c;招引了很多出资者的目光。关于港股的生意规则有哪些&#xff0c;第二证券下面就为大家详细介绍一下。 港股的生意规则&#xff1a; 1、港股生意时刻&#xff1a;港股商场的生意时刻分为上午和下午两个时段&#xff0c;上午的生…

零知识证明:哈希函数-Poseidon2代码解析与benchmark

1、哈希函数(Hash Function)与Poseidon 在密码学中,哈希函数是一种将任意大小的数据映射到固定大小的输出的函数。哈希函数的输出称为哈希值或哈希码。哈希函数具有单向性和抗碰撞性。一些常见的哈希函数包括 MD5、SHA-1、SHA-256 和 SHA-3。例如,假设您要验证一个文件的完整…

第八篇 Asciidoc 输出 All In One HTML 解决图片无法显示问题

问题:我的图片显示不出来了 小明使用 Asciidoc 来记笔记,他将笔记输出为 HTML 文件。小丽向小明借笔记。小明将 Asciidoc 笔记输出为 HTML文件,并拷贝给了小丽。 但是,小丽发现,图片都显示不出来了。 小丽:小明,你给我的笔记,图片都显示不出来啊。 小明:是我给你的…

2024CCPC郑州邀请赛暨河南省赛(A,B,C,D,F,G,H,J,K,L,M)

2024 National Invitational of CCPC (Zhengzhou), 2024 CCPC Henan Provincial Collegiate Programming Contest 2024 年中国大学生程序设计竞赛全国邀请赛&#xff08;郑州&#xff09;暨第六届 CCPC 河南省大学生程序设计竞赛 比赛链接 这场的题说实话难度其实都不大&…

AndroidStudio集成高德地图后出现黑屏并报错

报错内容为&#xff1a;No implementation found for void com.autonavi.base.ae.gmap.GLMapEngine.nativeMainThreadTrigger(int, long) (tried Java_com_autonavi_base_ae_gmap_GLMapEngine_nativeMainThreadTrigger and Java_com_autonavi_base_ae_gmap_GLMapEngine_nativeM…

金蝶AAS-V9.0前后端部署

前言 包含金蝶AAS9.0部署&#xff0c;前端部署&#xff0c;后端部署。 金蝶AAS9.0部署 1. 下载金蝶AAS9.0安装包上传至服务器&#xff1b; 2. 解压安装包&#xff1b; unzip -d /opt/AAS-V9.0 AAS-V9.0.zip3. 配置JAVA路径&#xff1b; echo $JAVA_HOME vim /opt/AAS-9.0…

06_机器学习算法_朴素贝叶斯

1. 朴素贝叶斯的介绍与应用 1.1 朴素贝叶斯的介绍 朴素贝叶斯算法(Naive Bayes, NB)是应用最为广泛的分类算法之一。它是基于贝叶斯定义和特征条件独立假设的分类方法。由于朴素贝叶斯法基于贝叶斯公式计算得到,有着坚实的数学基础,以及稳定的分类效率。NB模型所需估计的…

Mac SourceTree配置ssh git仓库

一、准备条件 1、Mac系统电脑 2、安装好SourceTree 3、获取ssh git仓库地址 二、配置步骤 1、打开终端命令行 ssh -t rsa -C "xxx""xxx"代表注册git仓库时&#xff0c;使用的用户名&#xff0c;可以是字符串也可以是邮箱地址。 如果遇到输入密码&#xf…

2024MySQL8安装与绿色版Navicat连接【提供安装包】数据库

视频教程面向人群和使用方法&#xff1a; 1&#xff1a;大学生【解决老师作业或自己兴趣学习需要】; 2&#xff1a;第一次需要安装MySQL的开发者【需要简单使用&#xff0c;因为项目会用到】 3&#xff1a;老手二倍速&#xff0c;新手老老实实按照教程一倍速模仿视频操作&am…

照明灯具十大排名哪个品牌好?照明灯具前十名排行榜大公开!

照明灯具十大排名哪个品牌好&#xff1f;护眼台灯作为照明灯具的重要组成部分&#xff0c;其品质与品牌选择显得尤为关键&#xff0c;市面上品质比较好的护眼台灯品牌有书客、明基、松下等品牌。本文旨在为大家揭晓照明灯具十大排名中的佼佼者&#xff0c;揭示照明灯具前十名的…

思科期末大作业

计算机网络&#xff0c;可代写网络作业&#xff0c; 思科cisco模拟器&#xff0c;eve&#xff0c;制作校园局域网、企业局域网&#xff0c;实现路由交换、单臂路由、冗余、ACL、Nat、PAT、DHCP,RIP,OSPF,pppoe等技术&#xff0c;价格合理&#xff0c;详细私聊

原创|手把手教你构建评分卡模型

作者&#xff1a;胡赟豪‍‍‍‍ 本文约2800字&#xff0c;建议阅读5分钟 本文介绍了构建评分卡模型。‍‍‍ 一、背景 在各种机器学习、深度学习模型快速发展的当下&#xff0c;评分卡模型作为一种可解释机器学习模型&#xff0c;仍然在金融、营销等领域被广泛使用。这一模型通…

vue嵌套路由

一、嵌套 children配置 1.父类路由 mymusic 2.子类路由 musicson 1.创建MusicSon组件 <template><div><p>从前和后来</p><p>唯一</p><p>运气来的似有若无</p></div> </template><script>export defaul…

案例 | 澳鹏自动驾驶标注方案入选虎嗅智库行业报告

随着自动驾驶技术发展及方案演进&#xff0c;市场对于数据标注的数量和质量的需求都呈现指数级增长。传统的手工标注已不能满足标注需求&#xff0c;自动标注伴随大模型的发展应运而生。 在这一背景下&#xff0c;虎嗅智库发布《自动驾驶数据标注技术落地洞察》&#xff0c;并…

PCB供电夹子DIY

在刷小红书的时候&#xff0c;看到了清华卓晴教授【https://zhuoqing.blog.csdn.net/】DIY的供电夹子&#xff0c;感觉对于自己DIY PCB的时候供电会比较方便&#xff0c;物料也比较简单&#xff0c;打算复刻一下。 使用物料 1、小夹子&#xff0c;文具店都有卖&#xff0c;选…

专业做护眼灯的有哪些品牌,强烈分享几款专业护眼灯的牌子

随着学生们重返校园&#xff0c;家长和孩子们忙于新学期的准备工作&#xff0c;眼睛健康的考量自然也在其中。这也是为何近年来护眼台灯越来越受到欢迎的原因之一。在受欢迎的过程中也会有不少人萌生出“专业做护眼灯的有哪些品牌”这一问题&#xff0c;作为一个长期近视并且日…