您现在的位置是:首页 > 正文

html的浮动作用是什么意思,html中浮动是什么

2024-04-01 06:46:33阅读 2

在HTML中,浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距,只需要给元素设置“float:left|right|none|inherit”样式即可。

2e4cd6bff9f8d84415635c2f29f7b007.png

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

一.什么是浮动(float)?

浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动,都会紧挨着上一个元素)

二.浮动(float)语法:

float:left或者right或者none或者inherit

left:让元素向左浮动

right:让元素向右浮动

none:让元素不浮动

inherit:让元素从父级继承浮动属性

三.浮动的特性

1.支持所有的css样式

2.内容撑开宽高

3.多个元素设置浮动,会排在一排

4.脱离文档流

5.提升层级半级

也就是说:一个元素设置了浮动属性后,下一个元素就会无视这个元素的存在,但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

注意:不管是什么属性的元素,如果设置了浮动属性,该元素就变成了具有inline-block属性的元素

四.浮动的具体表现

1、如果三个元素为block元素,在未设置浮动前

html样式:

我是块级元素1,没有设置浮动
我是块级元素2,没有设置浮动
我是块级元素3,没有设置浮动

css样式为:.class1{width:100px;height:100px;background:palegreen;}

.class2{width:120px;height:130px;background:gold;}

.class3{width:160px;height:180px;background:red;}

浏览器显示的结果为:

08709a81fc1ede185610e1a7478a709a.png

如果给第一个元素设置向左浮动:

我是块级元素1,设置向左浮动
我是块级元素2,没有设置浮动
我是块级元素3,没有设置浮动

css样式为:.class1{width:100px; height:100px;background:palegreen;float:left;}

.class2{width:120px; height:130px;background:gold;}

.class3{width:160px; height:180px;background:red;}

浏览器显示的结果为:

2d5cd4dfd7f9074789eee4fd064ad73b.png

结论:

1)没有设置浮动的元素会填充浮动元素留下来的空间

2)浮动元素会和非浮动元素发生重叠,浮动元素会在图层的最上面

3)使用浮动时,该元素会脱离文档流,后面的元素会无视这个元素,但依然会为这个浮动元素让出位置,并且元素中的文字内容会环绕在其周围

2、如果一个块级元素和一个行内元素(或者是一个内敛块级元素)我是块级元素,没有设置float

网站文章

  • 多线程&多进程

    一、线程&进程对于操作系统来说,一个任务就是一个进程(Process),比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程,打开两个记事本就启动了两个记事本进程,打开一个Word就启动了一个Word进程。进程是很多资源的集合(进程相当于是一个工厂)。·线程是包含在进程里面的,线程是用来运行干活的,线程就是最小的单位(相当于是工厂里面的工人)· 进程...

    2024-04-01 06:46:26
  • Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月2日-7月8日)

    Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月2日-7月8日)

    Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月2日-7月8日) 本周Silverlight学习资源更新 Silverlight之Window Phone 中SqlCE应用(17) zhaoyu_1979 Silverlight 4系列 +VS2010 + ArcGIS9.3 最短路径分析 wuwangrun

    2024-04-01 06:46:19
  • win10自带计算机应用恢复,win10重置电脑后怎么恢复应用_win10重置后恢复软件的方法...

    win10自带计算机应用恢复,win10重置电脑后怎么恢复应用_win10重置后恢复软件的方法...

    在使用win10操作系统的过程中,我们经常需要通过重置系统来解决一些问题,可是win10重置电脑后怎么恢复应用呢?有许多小伙伴不是很清楚该如何操作,所以对于这一情况,今天系统城小编为大家整理分享的就是...

    2024-04-01 06:46:11
  • Spring Cache 集成 Caffeine实现项目缓存

    Spring Cache 集成 Caffeine实现项目缓存

    一、前言 Spring Cache本身是Spring框架中一个缓存体系的抽象实现,本身不具备缓存能力,需要配合具体的缓存实现来完成,如Ehcache、Caffeine、Guava、Redis等。 二、...

    2024-04-01 06:45:28
  • cookie

    将不同的计算机通过网络应用使用对应的传输介质进行传输物理层、数据链路层、网络层、传输层、会话层、表示层、应用层[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sSptn...

    2024-04-01 06:45:21
  • 魔兽正式服5区服务器互通信息,《魔兽世界》一区合并服务器正式通告

    为了迎接1.12版本中的跨服务器战场功能,并进一步提升服务器表现以满足用户的需求,我们将对现有服务器的架构进行调整,一区至五区的服务器将进行小规模的服务器合并操作。我们已经从今天凌晨5点开始,对一区的...

    2024-04-01 06:45:14
  • 15HD_OJ——Tian Ji -- The Horse Racing

    15HD_OJ——Tian Ji -- The Horse Racing

    /* * Copyright (c) 2014, 烟台大学计算机学院 * All rights reserved. * 文件名称:test.cpp * 作 者:李晓凯 * 完成日期:2015年 6 月 11 日 * 版 本 号:v1.0 * * 问题描述: * 输入描述: * 程序输出: */ Problem Descriptio

    2024-04-01 06:44:35
  • react 表格高度自适应

    使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。...

    2024-04-01 06:44:19
  • Array.prototype.at()

    Array.prototype.at()

    看到MDN上Array有一个新的函数,但还在实验中,并没有正式开放 实际上在chrome浏览器上new一个数组,也是存在这个函数的。 at的含义就是快速定位数组中的第几项。比如我们不知道一个数组的长度...

    2024-04-01 06:43:40
  • 码农行业的术语,为啥又多,又难懂?

    什么是鲁棒。 什么是Predicate 什么协变,什么逆变 什么注入,什么反向控制 什么内聚,什么响应式 而且,猴子,竖子都能立山头,自己发明,创造新概念,新名词。 同一个概念,不同的英文,不同的解释,然后,重复的学习。 这个行业,什么时候能被一统江湖。 转载于:https://www.cnblogs.com/maoyan/p/10460556.html...

    2024-04-01 06:43:32