css语言中漂浮的语法是什么

css语言中的漂浮语法为“float:属性值;”。float属性用于定义元素在哪个方向浮动,会让盒子(元素)漂浮在标准流的上面,其周围的元素也会重新排列,直到它的外边缘碰到包含框或另一个浮动框的边框为止。该属性有三个属性值:1、“left”,定义元素向左浮动;2、“right”,定义元素向右浮动;3、“none”,定义元素不浮动。

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

在css语言中,想要元素漂浮起来需要使用float属性;该属性指定一个盒子(元素)是否应该浮动以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

float浮动属性的三个属性值:

  • left 元素向左浮动。

  • right 元素向右浮动。

  • none 默认值。元素不浮动,并会显示在其在文本中出现的位置。

浮动

一、 CSS布局的三种机制


css提供了3种机制来设置盒子的摆放位置,分别是:普通流(标准流)、浮动和定位,其中:

1、 普通流(标准流:“块级元素”会独占一行,“从上向下”排列;“行内元素”会按照顺序,“从左到右”排列,碰到父元素边缘自动换行;

2、 浮动:让盒子从普通流中“漂浮”起来,主要作用让多个块级盒子一行显示。

3、定位:将盒子“定位”在某一个位置——CSS离不开定位,特别是后面的js特效。

二、为什么需要浮动?


**概念:**元素浮动是指**设置了浮动属性的元素会:**

  • 脱离标准普通流的控制。

  • 移动到指定位置。

作用:

  • 让多个盒子(div)水平排列成一行,使浮动成为布局的重要手段。

  • 可以实现盒子的左右对齐等等…

  • 浮动较早是用来控制图片,实现文字环绕图片的效果。

浮动口诀之——浮

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box1{            width: 200px;            height: 200px;            background-color: rgba(255,0,0,0.5);            float: left;        }        .box2{            width: 300px;            height: 150px;            background-color: skyblue;        }    </style></head><body>    <div></div>    <div></div></body></html>

css语言中漂浮的语法是什么

float属性会让盒子漂浮在标准流的上面,所以第二个标准流的盒子跑到浮动盒子的底下了。

浮动口诀之——漏

浮动——漏漏漏~~~浮动的盒子,把自己原来的位置漏给下面标准流的盒子,就是不占有原来位置,是脱离标准流的,我们俗称 “脱标”

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box1{            width: 200px;            height: 200px;            background-color: rgba(255,0,0,0.5);            /* 让名列前茅个盒子浮动起来,不占位置 */            float: left;        }        .box2{            width: 300px;            height: 150px;            background-color: skyblue;        }    </style></head><body>    <div class="box1"></div>    <div class="box2"></div></body></html>

所以,box2下面的其实就是跑到box1盒子下面了, 被box1给压住了,遮挡起来了

css语言中漂浮的语法是什么

浮动口诀之——特

浮动——特性 float属性会改变元素display属性。

任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。

div {  width: 200px;  height: 200px;  background-color: pink;  /* 转换为行内块元素,可以水平显示,不过 div 之间有间隙,不方便处理 */  /* display: inline-block; */  /* 设置浮动属性,可以让 div 水平排列,并且没有间隙 */  float: left;}.two {  background-color: hotpink;}

css语言中漂浮的语法是什么

浮动的元素互相贴靠一起的,但是如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐

浮动的扩展

一、浮动元素与父盒子的关系


– 子盒子的浮动参照父盒子对齐。

css语言中漂浮的语法是什么

– 不会与父盒子的边框重叠,也不会超过父盒子的内边距。

css语言中漂浮的语法是什么

二、浮动元素与兄弟盒子的关系


在一个父级盒子中,如果**前一个兄弟盒子**是:

  • 浮动的,那么当前盒子会与前一个盒子的顶部对齐;

  • 普通流的,那么当前盒子会显示在前一个兄弟盒子的下方。

结论: 如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题

ps:浮动只会影响当前的或者后面的标准流的盒子,不会影响前面的标准流

建议:如果一个盒子里面有多个盒子,如果其中的一个盒子浮动了,其他兄弟也应该浮动。防止引起问题

三、为什么要清除浮动


因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。 !

结论:

  • 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响

  • 准确地说,并不是清除浮动,而是清除浮动后造成的影响

四、清除浮动本质


清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。 清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。 父级有了高度,就不会影响下面的标准流了

五、清除浮动的四种方式


在CSS中,clear属性用于清除浮动

语法:

选择器{clear:属性值;}   //clear 清除
属性值 右描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右俩侧浮动的影响

但是我们实际工作中, 几乎只用 clear: both;

1.额外标签法(隔墙法)

<!-- 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签:  1.添加在浮动元素最后  2.该元素必须是块元素,行内元素无效 --><div style=”clear:both”></div>
  • 优点:通俗易懂,书写方便

  • 缺点:添加许多无意义的标签,结构化较差

2.父级添加overflow属性方法

可以给父级添加: overflow为 hidden| auto| scroll  都可以实现。
  • 优点:代码简洁

  • 缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

3.使用after伪元素清除浮动
after 方式为空元素额外标签法的升级版,好处是不用单独加标签了

.clearfix:after {    content: "";   display: block;   height: 0;   clear: both;   visibility: hidden;  }   .clearfix {  /* IE6、7 专有 */  *zoom: 1;}
  • 优点:符合闭合浮动思想 结构语义化正确

  • 缺点:由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

4.使用双伪元素清除浮动

.clearfix:before,.clearfix:after {   content:"";  display:table; }.clearfix:after { clear:both;}.clearfix {  *zoom:1;}
  • 优点:代码更简洁

  • 缺点:由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

总结

  • 标准流(普通流)在布局中 块级元素会独占一行,从上向下排列;行内元素会按照顺序,从左到右排列,碰到父元素边缘则自动换行。

  • 浮动的应用场景大部分用于让盒子水平排列成一行和控制图片。

  • 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

  • 清除浮动一共有4中方式:

    • 额外标签法(隔墙法)

    • 父级添加overflow属性方法

    • 使用after伪元素清除浮动

    • 使用双伪元素清除浮动

读到这里,这篇“css语言中漂浮的语法是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

文章标题:css语言中漂浮的语法是什么,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/28803

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月22日
下一篇 2022年9月22日

相关推荐

  • frida如何抓apk网络包

    一 . 埋头分析踩坑路 从系统的角度去寻找hook点,而不是为了抓包而抓包。 1.okhttp调用流程 public static final MediaType JSON= MediaType.get(“application/json; charset=utf-8”);OkHttpClient …

    2022年9月8日
    1.2K00
  • SpringBoot统一返回格式怎么实现

    1. 直接返回结果 先看一下最基本的例子,直接将结果原封不动返回: @Data@AllArgsConstructor@JsonIgnoreProperties(ignoreUnknown = true)public class TestVo { private static final long s…

    2022年8月31日
    55000
  • 如何分析SQLMap和SQLi注入防御

    名列前茅部分:Sqlmap使用 1.1 sqlmap介绍 1. 前边说了一些sql注入的基础语句,但是手工注入很麻烦,我们可以借助sqlmap这个强大的sql注入工具,进行数据的获取. 2. sqlmap介绍 (1)#sqlmap是一种开源的渗透测试工具,可以自动检测和利用SQL注入漏洞以及接入该数…

    2022年9月16日
    52800
  • 用于解析mac地址的协议是哪个

    用于解析mac地址的协议是“RARP”。RARP(反向地址转换协议)可以将MAC地址解析为IP地址,允许局域网的物理机器从网关服务器的ARP表或者缓存上请求其IP地址。RARP发出要反向解析的物理地址并希望返回其对应的IP地址,应答包括由能够提供所需信息的RARP服务器发出的IP地址。 本教程操作环…

    2022年9月18日
    51900
  • windows驱动精灵dx如何修复

    驱动精灵dx修复方法: 1、打开驱动精灵点击“百宝箱”。 2、点击右下方的“软件管理”。 3、在搜索栏中输入“Directx”。 4、找到“Directx 修复工具”点击“安装”即可。 感谢各位的阅读,以上就是“windows驱动精灵dx如何修复”的内容了,经过本文的学习后,相信大家对windows…

    2022年9月10日
    44700
  • java IP归属地功能如何实现

    名列前茅步:如何拿到用户的真实IP 大家都知道,我们一般想访问公网,一般必须具备上网环境,那么我们开通宽带之后,运营商会给我们分配一个IP地址。一般IP地址我们都是自动分配的。所以我们不知道本机地址是什么?想知道自己的ip公网地址,可以通过百度搜索IP查看自己的ip位置 那么问题来了。百度是怎么知道…

    2022年9月6日
    51800
  • MySQL乐观锁和悲观锁如何实现

    锁分类 MySQL的中锁按照范围主要分为表锁、行锁和页面锁。其中myisam存储引擎只支持表锁,InnoDB不仅仅支持行锁,在一定程度上也支持表锁。按照行为可以分为共享锁(读锁)、排他锁(写锁)和意向锁。按照思想分为乐观锁和悲观锁。 表结构 下面的SQL语句是表的结构: CREATE TABLE `…

    2022年9月8日
    40700
  • tencent files可不可以删除

    “tencent files”可以删除,但是不建议删除;“tencent files”文件是腾讯文件,其中储存的都是与腾讯软件有关的文件,例如QQ中的缓存文件,如果删除该文件,可能会导致腾讯的软件在使用的过程中出现异常。 本教程操作环境:windows10系统、DELL G3电脑。 tencent …

    2022年9月18日
    1.2K00
  • redis分片集群如何搭建与使用

    前言 redis可以说在实际项目开发中使用的非常频繁,在redis常用集群中,我们聊到了redis常用的几种集群方案,不同的集群对应着不同的场景,并且详细说明了各种集群的优劣,本篇将以redis 分片集群为切入点,从redis 分片集群的搭建开始,详细说说redis 分片集群相关的技术点; 单点故障…

    2022年9月13日
    99300
  • APT组织使用的10大安全漏洞分别是什么

    概述 APT攻击(Advanced Persistent Threat,高级持续性威胁)是利用先进的攻击手段对特定目标进行长期持续性网络攻击的攻击形式。APT攻击的原理相对于其他攻击形式更为高级和先进,其高级性主要体现在精确的信息收集、高度的隐蔽性、以及使用各种复杂的目标系统/应用程序漏洞等方面。 …

    2022年9月21日
    76500
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部