【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>

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

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

相关文章

小白必看,手把手教你安装Python

目录 一&#xff0c;Python介绍 二&#xff0c;安装 Python 三&#xff0c;各种疑难杂症&#xff1a; 一&#xff0c;Python介绍 Python 是这两年来比较流行的一门编程语言&#xff0c;主要卖点是其相对简单的语法以及丰富的第三方库&#xff0c;下面我来带大家安装、配置 P…

python免杀初探

文章目录 loader基础知识loader参数介绍 evilhiding项目地址免杀方式修改加载器花指令混淆loader源码修改签名加壳远程条件触发修改ico的md5加密 loader基础知识 loader import ctypes #&#xff08;kali生成payload存放位置&#xff09; shellcode bytearray(b"shellc…

外网nat+nat server,内网做路由过滤,以及ppp CHAR认证 企业网搭建

作业 网络拓扑图如下所示&#xff1a; 要求&#xff1a;做适当的截图&#xff0c;表示完成相应的操作。 按照网络拓扑要求搭建网络结构&#xff0c;按照个人学号配置每个节点的IP地址&#xff0c;其中X为班级号&#xff0c;Y为学号末尾2位&#xff1b;Y1为学号末尾2位1&#…

KekeBlog项目实战后台模块(二)(已完结)

十一、后台模块-菜单列表 菜单指的是权限菜单&#xff0c;也就是一堆权限字符串 1. 查询菜单 1.1 接口分析 需要展示菜单列表&#xff0c;不需要分页。可以针对菜单名进行模糊查询。也可以针对菜单的状态进行查询。菜单要按照父菜单id和orderNum进行排序 请求方式 请求路径…

【JAVA学习笔记】39 - final关键字

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter10/src/com/yinhai/final_ 一、final关键字基本介绍 final可以修饰类、属性、方法和局部变量&#xff0c; 在某些情况下&#xff0c;程序员可能有以下需求&#xff0c;就会使用到final 1)当…

宝塔部署nginx遇到的400错误和502错误

在部署express项目的过程中&#xff0c;由于我的代码有些变化&#xff0c;于是在宝塔面板上我又重新上传了一下我的项目&#xff0c;结果阴差阳错的被nginx反向代理配置不当引起的400错误request header or cokkie is too large和自己代码逻辑问题引起的502 bad gataway给绊倒了…

源码解析SpringMVC处理请求的完整流程

1.WebMvcAutoConfiguration EnableWebMvcConfiguration自动装配类负责加载SpringMVC涉及的HandlerAdapter、HandlerMapping、ExceptionHandlerExceptionResolver等。 SpringMVC利用 DispatchServlet 处理上游Tomcat的请求时,会被HandlerMapping、HandlerAdapter的相关子类分别…

vue3中computed的用法

一、完整代码 <template><div class"about"><h1>Computed的用法</h1><h3>姓:{{ person.firstName }}</h3><input type"text" v-model"person.firstName"><h3>名:{{ person.lastName }}</h3…

深度学习中的不确定性综述

领域学者&#xff1a; http://www.gatsby.ucl.ac.uk/~balaji/ 论文标题&#xff1a; A Survey of Uncertainty in Deep Neural Networks 论文链接&#xff1a; https://arxiv.org/pdf/2107.03342.pdf 概要 在过去的十年中&#xff0c;神经网络几乎遍及所有科学领域&#x…

2021年下半年 软件设计师 上午试卷(1-28)

计算机指令系统采用多种寻址方式。立即寻址是指操作数包含在指令中&#xff0c;寄存器寻址是指操作数在寄存器中&#xff0c;直接寻址是指操作数的地址在指令中。这三种寻址方式获取操作数的速度 &#xff08;1&#xff09; 。 &#xff08;1&#xff09; A. 立即寻址最快&am…

Springcloud介绍

1.基本介绍 Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等&#xff0c;都可以用Spring Boot的开发风格做到一键启动和部署。Spring …

基于YOLO实现的口罩佩戴检测 - python opemcv 深度学习 计算机竞赛

文章目录 0 前言1 课题介绍2 算法原理2.1 算法简介2.2 网络架构 3 关键代码4 数据集4.1 安装4.2 打开4.3 选择yolo标注格式4.4 打标签4.5 保存 5 训练6 实现效果6.1 pyqt实现简单GUI6.3 视频识别效果6.4 摄像头实时识别 7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xf…

树与二叉树(考研版)

文章目录 树与二叉树树的基本概念结点、树属性的描述树的性质 二叉树的概念二叉树的性质二叉树的构建二叉树的遍历先序遍历中序遍历后序遍历层次遍历 递归算法和非递归算法的转换源代码 线索二叉树二叉树的线索化线索二叉树 找前驱/后继 树和森林树的存储 树与二叉树的应用哈夫…

Python 深度学习入门之CNN

CNN 前言一、CNN简介1、简介2、结构 二、CNN简介1、输出层2、卷积层3、池化层4、全连接层5、输出层 前言 1024快乐&#xff01;1024快乐&#xff01;今天开新坑&#xff0c;学点深度学习相关的&#xff0c;说下比较火的CNN。 一、CNN简介 1、简介 CNN的全称是Convolutiona…

java中的异常,以及出现异常后的处理【try,catch,finally】

一、异常概念 异常 &#xff1a;指的是程序在执行过程中&#xff0c;出现的非正常的情况&#xff0c;最终会导致JVM的非正常停止。 注意: 在Java等面向对象的编程语言中&#xff0c;异常本身是一个类&#xff0c;产生异常就是创建异常对象并抛出了一个异常对象。Java处理异常的…

Nginx 配置文件解读

一.配置文件解读 nginx配置文件主要分为四个部分&#xff1a; main{ #&#xff08;全局设置&#xff09;http{ #服务器配置upstream{} #&#xff08;负载均衡服务器设置&#xff09;server{ #&#xff08;主机设置&#xff1a;主要用于指定主机和端口&#xff09;location{} …

CUDA学习笔记(十四) Constant Memory

转载至https://www.cnblogs.com/1024incn/tag/CUDA/ CONSTANT MEMORY constant Memory对于device来说只读但是对于host是可读可写。constant Memory和global Memory一样都位于DRAM&#xff0c;并且有一个独立的on-chip cache&#xff0c;比直接从constant Memory读取要快得多…

【C++笔记】C++继承

【C笔记】C继承 一、继承的概念二、继承的语法和权限三、父类和子类成员之间的关系3.1、子类赋值给父类(切片)3.2、同名成员 四、子类中的默认成员函数4.1、构造函数4.2、拷贝构造4.3、析构函数 五、C继承大坑之“菱形继承”5.1、什么是“菱形继承”5.2、解决方法 一、继承的概…

数据结构-- 并查集

0. 引入 并查集是来解决等价问题的数据结构。 离散数学中的二元关系。 等价关系需满足自反性、对称性、传递性。 a ∈ S , a R a a R b & b R a a R b ∩ b R c > a R c a \in S, aRa \\ aRb \& bRa \\ aRb \cap bRc >aRc a∈S,aRaaRb&bRaaRb∩bRc>a…

【Opencv】OpenCV使用CMake和MinGW的编译安装出错解决

编译时出现的错误&#xff1a; mingw32-make[1]: *** [modules/core/CMakeFiles/opencv_core.dir/all] Error 2 Makefile:161: recipe for target ‘all’ failed mingw32-make: *** [all] Error 2解决方法&#xff1a; 根据贴吧老哥的解答&#xff0c;发现是mingw版本有问题导…