HTML(18)——浮动

标准流 

标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个

浮动

作用:让块级元素水平排列

属性名:float

属性值

  • left:左对齐
  • right:右对齐

特点:

  1. 浮动后的盒子顶对齐
  2. 浮动后的盒子具备行内快的特点
  3. 父级宽度不够,浮动的子级会换行
  4. 浮动后的盒子脱标

示例:

我写了两个块级元素如下图:

        .one {

            width: 100px;

            height: 100px;

            background-color: aqua;

        }

        .two {

            width: 200px;

            height: 200px;

            background-color: chocolate;

        }

两个类里面都写上float:left

        .one {

            width: 100px;

            height: 100px;

            background-color: aqua;

            float: left;

        }

        .two {

            width: 200px;

            height: 200px;

            background-color: chocolate;

            float: left;

        }

如果只给一个块添加float属性:

        .one {

            width: 100px;

            height: 100px;

            background-color: aqua;

            float: left;

        }

        .two {

            width: 200px;

            height: 200px;

            background-color: chocolate;

        }

这是因为one设置了float脱离了标准流,相当于浏览器找不到one这个块,导致two也出现在左上角。

清除浮动

场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)

解决办法:清除浮动 (并不是把浮动删除)

示例:

    <style>.top {margin: 10px auto;width: 1200px;height: 300px;background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}</style>
    <div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>

效果如图:

当把父级的高度删除:

发现bottom出现在顶上。当top没有height,只能靠元素撑开,但由于两个块都是float,所以影响到了整个页面的布局效果

 清除这种影响有四种方法:

额外标签法

在父级元素内容的最后添加一个块级元素,设置属性clear:both

    <div class="top"><div class="left"></div><div class="right"></div><div style="clear:both"></div></div>

 单伪元素法

原理和额外标签法是一样的,额外标签法是人工加标签,该方法是通过伪元素。

也是给父级最后添加块级元素。

.clearfix::after{content:"";display:block;clear:both;
}
    <div class="top clearfix"><div class="left"></div><div class="right"></div></div>

双伪元素法

.clearfix::before,
.clearfix::after{content:"";display:table;
}
.clearfix::after{clear:both;
}
    <div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>

before伪元素是解决外边距塌陷问题。

overflow

父级添加属性overflow:hidden;

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

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

相关文章

颠覆传统编程:用ChatGPT十倍提升生产力

我们即将见证一个新的时代&#xff01;这是最好的时代&#xff0c;也是最坏的时代&#xff01; 需求背景 背景&#xff1a; 平时会编写博客&#xff0c;并且会把这个博客上传到github上&#xff0c;然后自己买一个域名挂到github上。 我平时编写的博客会有一些图片来辅助说明的…

Docker网络介绍

网络是虚拟化技术中最复杂的部分&#xff0c;也是Docker应用中的一个重要环节。 Docker中的网络主要解决容器与容器、容器与外部网络、外部网络与容器之间的互相通信的问题。 这些复杂情况的存在要求Docker有一个强大的网络功能去保障其网络的稳健性。因此&#xff0c;Docker…

【Linux】了解冯诺伊曼体系结构

文章目录 冯诺依曼体系结构概念冯诺依曼体系结构的推导过程理解冯诺依曼体系 冯诺依曼体系结构概念 冯诺依曼结构是现代计算机发展所遵循的基本结构形式之一&#xff0c;其特点是“程序存储&#xff0c;共享数据&#xff0c;顺序执行”。冯诺依曼结构消除了原始计算机体系中&a…

音乐圈的颠覆与挑战讨论

最近的一个月&#xff0c;音乐界经历了一场前所未有的变革。一系列音乐大模型轮番上线&#xff0c;它们以惊人的能力&#xff0c;将素人生产音乐的门槛降到了最低。这一系列事件引发了关于音乐圈是否会被AI彻底颠覆的热烈讨论。然而&#xff0c;短暂的兴奋过后&#xff0c;我们…

AOP切面不起作用?一文教你排查与修复Spring代理问题

问题背景&#xff1a;在构建一个在线编程平台的过程中&#xff0c;我使用了Spring AOP来增强代码沙箱&#xff08;CodeSandBox&#xff09;的功能。通过定义一个切面&#xff0c;我希望在执行代码沙箱的相关方法前后添加日志记录和其他业务逻辑。 在编写单元测试时&#xff0c…

【线性代数】实对称

对称矩阵是在线性代数中非常重要的一类矩阵。一个矩阵 \( A \) 被称为对称矩阵&#xff0c;如果它等于其转置矩阵&#xff0c;即 \( A A^T \)。对称矩阵具有以下几个重要性质&#xff1a; ### 1. 特征值和特征向量 - **实特征值**&#xff1a;对称矩阵的所有特征值都是实数。…

PCDViewer-5.0.0——开启漫游的世界

在点云相关的研发和生产中&#xff0c;按Pose进行场景漫游是一个十分有用的功能&#xff0c;它可以快速地检查SLAM建图质量或点云编辑效果。用 ros rviz进行点云漫游是一项不错的选择&#xff0c;但它存在的一定的开发门槛&#xff0c;而且需要安装额外的资源。 PCDViewer-5.0.…

[Vite+Vue3+TS] Router的使用

1. 安装Vue Router npm install vue-router4 --save这会安装Vue Router的最新4.x版本&#xff0c;并将其添加到你的package.json依赖中。 2. 创建路由配置文件 在src目录下创建一个名为router的文件夹&#xff08;如果尚未存在&#xff09;&#xff0c;并在该文件夹内创建一…

vue引入eachrts

1. 安装Echarts 使用npm npm install echarts --save 导入Echarts插件 import echarts from echarts Vue.prototype.$echarts echarts import echarts from echarts 我们来做个简单的实例首先需要一个容器装下Echarts <template><div id"list"…

物理隔离状态下,如何保障数据单向导入的安全性?

为了保护企业的核心数据&#xff0c;像一些涉密行业会通过物理隔离方式&#xff0c;将网络隔离成内网和外网&#xff0c;比如军工、党政、生物医药、金融等行业&#xff0c;网络隔离后会存在外网数据单向导入内网&#xff0c;内网数据单向导出外网等交互需求。在实施数据单向导…

Flink-03 Flink Java 3分钟上手 Stream 给 Flink-02 DataStreamSource Socket写一个测试的工具!

代码仓库 会同步代码到 GitHub https://github.com/turbo-duck/flink-demo 当前章节 继续上一节的内容&#xff1a;https://blog.csdn.net/w776341482/article/details/139875037 上一节中&#xff0c;我们需要使用 nc 或者 telnet 等工具来模拟 Socket 流。这节我们写一个 …

36.Http协议的设计与解析

Http协议比Redis协议复杂的多,如果程序员自己去实现,工作量大。 Netty已经把Http协议的编解码器实现好了,只需要简单的配置就可以使用。 做一个http的服务端需要HttpServerCodec。 看它继承的父类: 结合了两个类: HttpRequestDecoder(入站处理器extends Channelnbound…

【网络安全常用术语解读 :什么是0day、1day、nday漏洞】

脆弱性攻击的时间窗被称作脆弱性窗口。通常情况下&#xff0c;一个安全漏洞的时间越久&#xff0c;攻击者就会有更多的机会去攻击它。 2. 0day 漏洞 0天漏洞&#xff0c;也被称作"零日漏洞"&#xff0c;是指尚未由供应商公布的缺陷&#xff0c;表示攻击者已知晓该缺…

力扣练习题 (2024.6.23)

//我们定义&#xff0c;在以下情况时&#xff0c;单词的大写用法是正确的&#xff1a; //全部字母都是大写&#xff0c;比如 "USA" 。 //单词中所有字母都不是大写&#xff0c;比如 "leetcode" 。 //如果单词不只含有一个字母&#xff0c;只有首字母大写&a…

Java线程基础知识汇总

进程与线程 什么是进程&#xff1f; 进程是指在计算机中运行的程序的实例。它是操作系统进行资源分配和调度的基本单位。一个进程可以包含多个线程&#xff0c;每个线程都共享该进程的资源&#xff0c;如内存、文件和打开的网络连接等。每个进程都有自己的地址空间&#xff0…

FlowUs2024重磅革新预告:RAG技术赋能『问问AI』,笔记变现新纪元等你开启!

&#x1f389; 在FlowUs的广阔天地间&#xff0c;知识的边界被无限拓展&#xff0c;引领着一场场创新与收获的庆典&#xff01;&#x1f680; 随着一年间不断的精进与革新&#xff0c;FlowUs与众多用户并肩前行&#xff0c;在追求极致体验的道路上迈出坚实步伐。步入2024年&am…

WordPress项目教程:自动采集并发布,让你轻松实现网站内容更新

随着互联网的发展&#xff0c;越来越多的人开始关注自己的个人网站&#xff0c;通过网站展示自己的才华、分享知识、推广产品等。然而&#xff0c;个人网站的运营并非易事&#xff0c;尤其是内容更新方面。为了解决这个问题&#xff0c;今天我们将为大家推荐一款WordPress插件主…

minio直接通过地址访问无需服务器转发

背景 做网站有些图片、视频、js等资源&#xff0c;没有什么变化&#xff0c;想在网站上直接使用&#xff0c;前端拿到地址可直接访问获得&#xff0c;而不是通过后台转一道再获得&#xff0c;折腾了半天访问不到&#xff0c;从网上找资料挨个试&#xff0c;也没完全解决&#…

云计算期末综合测试题

云计算综合测试题 单选题填空题判断题简答题 单选题 这里选择题&#xff0c;直接以填空题展示&#xff0c;并给出解析 Bigtable是&#xff08;Google&#xff09;开发的分布式存储系统 解析&#xff1a;分布式结构化数据表Bigtable是Google基于GFS和Chubby开发的分布式存储系统…

君子小人的格局、境界

子曰&#xff1a;君子怀德&#xff0c;小人怀土&#xff1b;君子怀刑&#xff0c;小人怀惠。 直译&#xff1a;君子怀念道德&#xff0c;小人怀念乡土&#xff1b;君子关心法度&#xff0c;小人关心恩惠。 这里的君子与小人只是体现格局、境界的不同&#xff1b; 君子怀的是德…