当前位置: 首页 > news >正文

【Web】| CSS Float (浮动)的使用方法

Float(浮动)概念

CSS的Float(浮动),会使得元素向左或者向右移动,其它周围元素也会重新排列。

Float浮动,往往是用于图像,但它的布局一样非常有效。

元素如何浮动

元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量的向左或者向右移动,直到它的外边缘碰到包含框活着另一个浮动框为止。

浮动元素之后的元素将会围绕它。

浮动元素之前的元素不会受到影响。

如果图像是右浮动,下面的文本流将环绕在它左边:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>如果图像是右浮动,下面的文本流将环绕在它左边</title>
<style>
img 
{float:right;
}
</style>
</head><body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="Header.jpg" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body></html>

运行出来的页面:

 

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>。</title> 
<style>
.thumbnail 
{float:left;width:110px;height:90px;margin:5px;
}
</style>
</head><body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

清除浮动(clear使用方法)

元素浮动之后,周围其他元素会重新排列,为了避免这种情况,使用clear属性。

clear属性指定元素两侧不能出现浮动元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>。</title> 
<style>
.thumbnail 
{float:left;width:110px;height:90px;margin:5px;
}
.text_line
{clear:both;margin-bottom:2px;
}
</style>
</head><body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

相关文章:

【Web】| CSS Float (浮动)的使用方法

Float&#xff08;浮动&#xff09;概念 CSS的Float&#xff08;浮动&#xff09;&#xff0c;会使得元素向左或者向右移动&#xff0c;其它周围元素也会重新排列。 Float浮动&#xff0c;往往是用于图像&#xff0c;但它的布局一样非常有效。 元素如何浮动 元素的水平方向…...

#力扣:面试题 02.03. 删除中间节点@FDDLC

面试题 02.03. 删除中间节点 - 力扣&#xff08;LeetCode&#xff09; 一、Java /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(int x) { val x; }* }*/ class Solution {public void deleteNode(List…...

多线程原子性、一致性与有序性

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有需要我的支持&#xff0c;请私信或评论留言&#xff01; 前言&#xff1a; …...

读书笔记:Effective C++ 2.0 版,条款28(namespace )

条款28: 划分全局名字空间 namespace 作为前缀&#xff0c;防止不同名字域的类型、常量等互相污染。 没命名的名字空间一般用于限制名字空间内部元素的可见性。 namespace sdm {const double book_version 2.0;class handle { ... };handle& gethandle(); }早期用struct模…...

CSS常见选择器总结

1.简单选择器 简单选择器是开发中使用最多的选择器&#xff0c;包含&#xff1a; 元素选择器&#xff0c;使用元素的名称 类选择器&#xff0c;使用.类名 id选择器&#xff0c;使用#id id注意事项&#xff1a; 一个HTML文档里面的id值 是唯一的&#xff0c;不能重复 id值如…...

阿里云服务结构--长期更新

CNCF 全称Cloud Native Computing Foundation&#xff08;云原生计算基金会&#xff09;&#xff0c;成立于 2015 年7月21日&#xff08;于美国波特兰OSCON 2015上宣布&#xff09;&#xff0c;其最初的口号是坚持和整合开源技术来让编排容器作为微服务架构的一部分&#xff0…...

Java8 BiConsumer<T, U> 函数接口浅析分享(含示例,来戳!)

文章目录 Java8 BiConsumer<T, U> 函数接口浅析分享&#xff08;含示例&#xff0c;来戳&#xff01;&#xff09;源码accept 方法示例示例一示例二 andThen 方法示例示例一示例二 示例相关代码类dohandler 方法student.javaStudentScore.javaStudentScoreDto.java Java8…...

C++学习:类的使用--运算符重载

我们知道C可以对函数进行重载&#xff0c;让同名的函数来完成相同的基本操作。其实运算符也是可以重载的&#xff0c;而且有的运算符已经在使用了&#xff0c;就像*&#xff0c;既可以用于地址&#xff0c;又可以用于乘法。 下面是一个计算时间的类 #ifndef MYTIME_H #define…...

嵌入式养成计划-46----QT--简易版网络聊天室实现--QT如何连接数据库

一百一十九、简易版网络聊天室实现 119.1 QT实现连接TCP协议 119.1.1 基于TCP的通信流程 119.1.2 QT中实现服务器过程 使用QTcpServer实例化一个服务器对象设置监听状态&#xff0c;通过listen()函数&#xff0c;可以监听特定的主机&#xff0c;也可以监听所有客户端&#x…...

YOLO目标检测——人脸识别数据集【对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;安全监控、智能驾驶、人机交互、人脸门禁、人脸支付、人脸搜索数据集说明&#xff1a;人脸识别数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;含有人脸图片标签说明&#xff1a;使用lableimg标注软件标注&#xff0…...

mybatis日志不打印的问题

在项目中使用了 spring boot&#xff0c;orm 层集成了 mybatis-plus&#xff0c;按照默认配置后发现之前配置的 sql 日志正常&#xff0c;在这里却不正常&#xff0c;鉴于日志使用的是 logback&#xff0c;想到了打印 sql 的日志级别是 debug&#xff0c;所以&#xff0c;按照这…...

【分布式缓存】关于 Memcached 的几个常见问题

关于 Memcached 的几个常见问题 1.Memcached 是怎么工作的&#xff1f;2.Memcached 最大的优势是什么&#xff1f;3.Memcached 和 MySQL 的 querycache 相比&#xff0c;有什么优缺点&#xff1f;4.Memcached 和服务器的 local cache&#xff08;比如 PHP 的 APC、mmap 文件等&…...

MySQL 三大日志(bin log、redo log、undo log)

redo log redo log (重做日志) 是 InnoDB 存储引擎独有的&#xff0c;它让 MySQL有了崩溃恢复的能力&#xff0c;是事务中实现 持久化的重要操作 比如 MySQL 实例宕机了&#xff0c;重启时&#xff0c;InnoDB 存储引擎会使用 redo log 恢复数据&#xff0c;保证数据的持久性与…...

asp.net社区医疗辅助诊断网站系统VS开发sqlserver数据库web结构c#编程

一、源码特点 asp.net社区医疗辅助诊断网站系统 是一套完善的web设计管理系统&#xff0c;系统采用mvc模式&#xff08;BLLDALENTITY&#xff09;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver200…...

NLP Bi-Encoder和Re-ranker

Retrieve & Re-Rank https://www.sbert.net/examples/applications/retrieve_rerank/README.html Bi-Encoder vs. Cross-Encoder https://www.sbert.net/examples/applications/cross-encoder/README.html Bi-Encoder会用BERT对输入文本编码&#xff0c;再根据cosine相似度…...

SpringBoot+Mybatis 配置多数据源及事务管理

目录 1.多数据源 2.事务配置 项目搭建参考: 从零开始搭建SpringBoot项目_从0搭建springboot项目-CSDN博客 SpringBoot学习笔记(二) 整合redismybatisDubbo-CSDN博客 1.多数据源 添加依赖 <dependencies><dependency><groupId>org.springframework.boot&…...

华为OD 猴子吃桃(100分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…...

切片不够技术来凑

概述 随着数据经度的提升&#xff0c;18级的切片有些场景已经不够用了&#xff0c;但是大部分在线的栅格切片最大级别还是18级&#xff0c;如果地图继续放大&#xff0c;有的框架&#xff08;leaflet会&#xff0c;openlayers和mapboxGL不会&#xff09;会存在没有底图的情况。…...

特约|数码转型思考:Web3.0与银行

日前&#xff0c;欧科云链研究院发布重磅报告&#xff0c;引发银行界及金融监管机构广泛关注。通过拆解全球70余家银行的加密布局&#xff0c;报告认为&#xff0c;随着全球采用率的提升与相关技术的成熟&#xff0c;加密资产已成为银行业不容忽视也不能错过的创新领域。 作为…...

MySQL知识详细汇总

存储引擎 MyISAM 不支持事务&#xff0c;不支持外键&#xff0c;支持全文索引&#xff0c;查询、插入效率高InnoDB 支持事务&#xff08;事务的特性&#xff09; 原子性&#xff1a;一个事务中所有的操作&#xff0c;要么全部完成&#xff0c;要么全部不完成&#xff0c;不会在…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...