css---浮动知识点精炼汇总

前言

欢迎来到我的博客

个人主页:北岭敲键盘的荒漠猫-CSDN博客

浮动简单理解与介绍

这是我们普通的页面标签效果。

每个标签从上到下依次排列。

浮动顾名思义就是让这个标签飞翔起来。

他飞起来后,后面的标签来到他的位置上。

而浮动的标签就会显示在标签的上面。

如果多个相邻的标签一起浮动。那么这些浮动的标签就会在一行上排列。

浮动的作用

1.横向排列块型盒子

我们的块标签都是纵向排列的,即使设置了长宽后他们依然是纵向排列。

    <style>.class {height: 80px;width: 100px;}</style>
</head><body><div style="background-color: blueviolet;" class="class">1</div><div style="background-color: brown;" class="class">2</div><div style="background-color: chartreuse;" class="class">3</div>
</body>

我们可以利用浮动来让他们横向排列。

2.制作左右框效果

利用浮动可以很方便的把框给左右两边分布。

3.制作随父标签变化的页面

正常情况下,我们的窗口是不会随页面改变的,浮动可以保证浮动内容显示出来。

浮动的语法

语法: float: 属性值;

属性值:

属性作用
none不浮动(默认)
left左浮动
right右浮动

效果跟上面一样,不演示了。

浮动的特性

添加浮动之后,标签的特性就会改变。

脱标

标准流:就是我们标签默认自己的特性,纵向排列。

直观理解:

其实就是添加浮动后,他就不是他原先的标签了。恕瑞玛飞升了,他原先的位置空出来了,给后面的人了。

直观的看效果吧:

    <style>.class {height: 200px;width: 300px;}</style>
</head><body><div style="background-color: blueviolet;" class="class">1</div><div style="background-color: brown; height: 100px; width: 200px; float: left;">2</div><div style="background-color: chartreuse;" class="class">3</div>
</body>

后面的人继承他的位置。

水平顶端对齐

    <style>.class {height: 200px;width: 300px;float: left;}</style>
</head><body><div style="background-color: blueviolet;" class="class">1</div><div style="background-color: brown; height: 100px; width: 200px; float: left;">2</div><div style="background-color: chartreuse;" class="class">3</div>
</body>

制作苦茶子的形状:

 根据父标签自动变化

我们做的这个苦茶子会根据父标签(整个窗口)的变化而变化。

 行内块特性

不管你浮动之前是什么类型的标签,浮动之后统一都是行内块标签。

浮动在页面布局中的应用

我们先来分析一下浮动对于布局的优势劣势

优势:

1.可以便捷的进行平行排列。

2.可以进行左右侧控制

3.内容会根据父盒子的状态自主改变。

劣势:

1.默认是在一行中排列。并不能垂直排列。

针对他的优劣势我们想要布局的话,似乎需要解决这个一行排列的问题。

那么我们知道标准流是垂直排列的。

也就是说,我们可以利用垂直排列的特性,来创造盒子,用盒子来进行垂直布局,然后用浮动标签进行盒子内部的布局。

案例演示:

    <style>.mid {height: 100px;width: 400px;margin: 0 auto;margin-top: 2px;margin-bottom: 2px;background-color: palegoldenrod;}.flat {float: right;width: 20px;height: 20px;background-color: black;margin: 5px 5px;}</style>
</head><body><div style="height: 30px; background-color: palegoldenrod;"><div style="float: left;" class="flat"></div><div class="flat"></div><div class="flat"></div></div><div class="mid"></div><div class="mid"></div><div class="mid"></div><div style="height: 50px; background-color: palegoldenrod;"></div>
</body>

清除浮动

清除浮动的情景:

我们会遇到类似于商品架这样的需求,我们的盒子不会给定高度,而是随着商品的增加而增高。

但是我们明白,浮动的脱标特性会让这个盒子中没有标准流元素,也就是说这个盒子会变成高度为0的情况。

看以下场景:

我先把浮动注释起来

    <style>.flat {/* float: right; */width: 60px;height: 80px;background-color: black;margin: 5px 5px;}</style>
</head><body><div style="background-color: palegoldenrod;"><div class="flat"></div><div class="flat"></div><div class="flat"></div></div>
</body>

我没有设置高度,盒子随着子元素变大而变大。

下面把注释去掉

盒子没了

消除浮动就是针对这种情况产生。

清除浮动的方法

添加额外的块级标签

清除方法:在浮动标签的最后再添加一个标签,这个标签添加清除浮动

clear: both;

缺点:每个需要清除浮动的位置都需要添加这个表情,导致结构比较复杂。

效果:

    <div style="background-color: palegoldenrod;"><div class="flat"></div><div class="flat"></div><div class="flat"></div><div style="clear: both;"></div></div>

父元素添加overflow属性

给父元素设置一个overflow属性,属性值使用hidden。

优点:相比于添加额外标签,这个方法很简洁。

缺点:这个属性是隐藏溢出部分的意思,有的盒子一半在外面就会显示异常。

效果

    <div style="background-color: palegoldenrod; overflow: hidden;"><div class="flat"></div><div class="flat"></div><div class="flat"></div></div>

 父元素添加伪元素

给父元素添加下面属性

.clearfix::after {content: "";display: table;clear: both;
}

原理跟额外标签差不多

    <style>.flat {float: left;width: 60px;height: 80px;background-color: black;margin: 5px 5px;}.clearfix::after {content: "";display: table;clear: both;}</style>
</head><body><div style="background-color: palegoldenrod;" class="clearfix"><div class="flat"></div><div class="flat"></div><div class="flat"></div></div>
</body>

效果

双伪元素清除浮动

添加这串代码(*zoom有时候会显示异常,看情况加,加上兼容性好)

.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}/* 确保IE6-7也能清除浮动 */
.clearfix {*zoom: 1;
}

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

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

相关文章

设计模式之MVC模式

在编程江湖闯荡多年&#xff0c;我手中打磨过的设计模式多如繁星&#xff0c;但论及经典与实用&#xff0c; MVC&#xff08;Model-View-Controller&#xff09;模式 绝对是个中翘楚&#xff01;它不仅是Web应用的骨架&#xff0c;更是软件架构的智慧结晶。今天&#xff0c;咱们…

头歌:Spark案例剖析 - 谷歌网页排名引擎PageRank实战

第1关:海量数据导入:SparkSQL大数据导入处理 任务描述 工欲善其事必先利其器,大数据分析中最重要的是熟练掌握数据导入工具的使用方法。Spark SQL是Spark自带的数据库,本关你将应用Spark SQL的数据导入工具实现文本数据的导入。其中,graphx-wiki-vertices.txt文件中含有网…

010_redhat安装zookeeper

目录 1.环境准备2.下载上传zookeeper安装包1)[官网下载zookeeper-3.6.4安装包](https://archive.apache.org/dist/zookeeper/zookeeper-3.6.4/apache-zookeeper-3.6.4-bin.tar.gz)2)创建soft文件夹 3.解压4.配置启动1、配置zoo.cfg2、启动zookeeper 小结 1.环境准备 准备一台l…

如何创建一个 Django 应用并连接到数据库

简介 Django 是一个用 Python 编写的免费开源的 Web 框架。这个工具支持可扩展性、可重用性和快速开发。 在本教程中&#xff0c;您将学习如何为一个博客网站建立与 MySQL 数据库的初始基础。这将涉及使用 django-admin 创建博客 Web 应用程序的骨架结构&#xff0c;创建 MyS…

LeetCode-网络延迟时间(Dijkstra算法)

每日一题 今天刷到一道有关的图的题&#xff0c;需要求单源最短路径&#xff0c;因此使用Dijkstra算法。 题目要求 有 n 个网络节点&#xff0c;标记为 1 到 n。 给你一个列表 times&#xff0c;表示信号经过 有向 边的传递时间。 times[i] (ui, vi, wi)&#xff0c;其中 …

wordpress外贸独立站建站10要10不要

创建一个成功的WordPress外贸独立站需要注意很多因素。以下是zhanyes根据多年建站经验总结的wordpress外贸独立站建站的10个建议和10个避免的事项&#xff0c;以帮助您建立一个高质量的外贸网站&#xff1a; 10个要&#xff1a; 1. 要选择合适的域名&#xff1a;确保您的域名…

element-ui的bug记录

1.先隐藏元素再显示元素时&#xff0c;导致校验不生效的做法 <el-form-itemlabel"时间长度"prop"timeLength"v-show"form.majorFlag":rules"[{ required: form.majorFlag ? true : false, message: 时间长度不能为空, trigger: blur }…

pyppeteer 执行js函数调用ajax post传入参数并获取返回值

在Pyppeteer中&#xff0c;你可以使用page.evaluate()方法来执行JavaScript函数&#xff0c;并且可以传递参数给这个函数。如果你需要执行一个调用AJAX POST请求的函数并且传入参数&#xff0c;同时需要获取返回值&#xff0c;可以使用以下方法&#xff1a; import asyncio fr…

Mybatis-Plus学习:快速入门、核心功能、扩展功能、插件功能

文章目录 MybatisPlus快速入门快速开始常见注解常见配置 核心功能条件构造器&#xff08;Wrapper&#xff09;自定义SQLService接口基本用法基础业务接口复杂业务接口Lamda查询Lamda更新批量新增 扩展功能代码生成代码生成器快速开发插件 静态工具逻辑删除枚举处理器JSON处理器…

Java实现裁剪PDF

目录 安装Java PDF库 Java裁剪PDF页面 Java裁剪PDF页面并将结果保存为图片、HTML、Excel等格式 裁剪PDF页面是一项常见的任务&#xff0c;它可以用来调整文档的尺寸和去除不需要的边距或白边。通过裁剪页面&#xff0c;你可以优化文档的布局和展示效果&#xff0c;使其更符合…

万界星空科技商业开源MES+项目合作+商业开源低代码平台

今天我想和大家分享的是一套商业开源的 MES制造执行管理系统带源码。对于制造业而言&#xff0c;MES 是一个至关重要的系统&#xff0c;它可以帮助企业提高生产效率、优化资源利用、提高产品质量&#xff0c;从而增强市场竞争力。 什么是 MES&#xff1f; MES 是指通过计算机技…

不通过分组注解计数:Django查询集的高级用法

Django的查询集提供了各种高级用法&#xff0c;可以在不使用分组注解的情况下进行计数。下面是一些常用的高级用法示例&#xff1a; count()方法&#xff1a; 最简单的方法是使用count()方法来计算查询集中的对象数量。例如&#xff1a; num_objects MyModel.objects.count()f…

# notepad++ 编辑器英文版,如何打开自动换行

notepad 编辑器英文版&#xff0c;如何打开自动换行 在Notepad中&#xff0c;如果你想要开启自动换行功能&#xff0c;可以按照以下步骤操作&#xff1a; 1、打开 Notepad 编辑器。 1.1. 依次点击菜单栏中的【视图】&#xff0c;英文版对应【View】。1.2. 在【视图】下拉菜单…

商务谈判技巧与口才书籍有哪些类型

商务谈判技巧与口才书籍有哪些类型&#xff08;3篇&#xff09; 商务谈判技巧与口才书籍的类型丰富多样&#xff0c;以下从三个角度进行介绍&#xff1a; **篇&#xff1a;基础理论与策略类书籍 这类书籍通常深入剖析谈判的本质&#xff0c;系统介绍谈判的原理、技巧和策略。…

QProcess 使用实例

QProcess运行一个命令行&#xff0c;比如ipconfig示例cpp主要的代码如下所示&#xff1a; QStringList m_Arguments; m_Arguments << "/c" << "ipconfig"; QString m_Command("cmd.exe"); QString m_Input; run(); / QStr…

量子城域网建设设备系列(二):量子密钥管系统(KMS)

在上文介绍光量子交换机的文章中我们提到&#xff0c;量子保密通信网络的通道切换是由量子密钥管理系统&#xff08;Key Management System&#xff0c;KMS&#xff09;给光量子交换机下发信道切换指令&#xff0c;实现整个网络中任意两对量子密钥分发终端的量子信道互联互通&a…

WPF之ToolTip提示

ToolTip控件在WPF担任着提示信息的位置&#xff0c;当鼠标悬停在某个标签上时ToolTip中的信息会显示&#xff0c;使用时将ToolTip放在某个标签内部或者设置某个标签的ToolTip属性。 使用方法1 <TextBox Width"300"Height"40"HorizontalAlignment"…

第六十九章 使用 NSD (UNIX® Linux macOS) - 示例 2:两个 Web 应用程序

文章目录 第六十九章 使用 NSD (UNIX Linux macOS) - 示例 2&#xff1a;两个 Web 应用程序示例 2&#xff1a;两个 Web 应用程序将负载分散到多个 NSD 进程上授予 NSD 管理员权限 第六十九章 使用 NSD (UNIX Linux macOS) - 示例 2&#xff1a;两个 Web 应用程序 示例 2&…

Opensbi初始化分析:设备初始化-warmboot

Opensbi初始化分析:设备初始化-warmboot 设备初始化sbi_init函数init_warmboot函数coolboot & warmbootwait_for_coldboot函数domain && scratch(coldboot所特有)console初始化及print相关工作(coldboot所特有)系统调用的相关初始化(coldboot所特有)综上设备…

【跟马少平老师学AI】-【神经网络是怎么实现的】(九)长短期记忆网络

一句话归纳&#xff1a; 1&#xff09;RNN也会存在梯度消失的问题。 2&#xff09;同一句话&#xff0c;对于不同的任务&#xff0c;句中不同的词起的作用也不一样。 3&#xff09;LSTM&#xff08;长短期记忆&#xff09;子网络&#xff1a; 门&#xff0c;让输入经过运算&…