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日 下午10:04
下一篇 2022年9月22日 下午10:05

相关推荐

  • windows todesk如何传输文件

    todesk传输文件的方法 1、 打开ToDesk,进入“设备列表”,选中想要传输的对象 2、选中后,点击右侧的“文件传输”,就能将需要的文件传给对方了 3、或者还有一种方法,就是点击工具栏箭头按钮 4、选择“文件” 5、最后在其中选中文件夹就可以进行文件的传输了。 感谢各位的阅读,以上就是“win…

    2022年9月26日
    34600
  • bootstrap如何清除浮动的样式

    在bootstrap中,可以利用“.clearfix”辅助类来清除浮动的样式,辅助类是bootstrap提供的一组工具类,用于辅助项目的开发,只需要给需要清除浮动的元素设置类名为“.clearfix”即可,语法为“<元素 class=”clearfix”>”。 本…

    2022年9月21日
    8000
  • windows驱动精灵检测不到显卡驱动如何解决

    解决方法: 方法一: 可能很多小伙伴在安装驱动的时候没有弄清楚自己的型号。 32位的驱动是无法装在64位上的。 小伙伴们应该尝试重新安装驱动。 方法二: 驱动太过老旧也是无法检测到的。 使用驱动精灵进行一下检测。 查看驱动是否需要进行更新。 1、进入驱动精灵,点击“硬件检测”。 2、如果驱动需要升级…

    2022年9月10日
    14100
  • cad字体不显示数字怎么解决

    解决方法 1、首先我们打开软件,找到菜单栏上的格式,再找到下拉菜单上的标注样式管理器。 2、然后在跳转出来的对话框中,点击当前使用的标注样式,然后再点击右侧的修改。 3、然后在跳转的新页面里,我们点击文字的选项,在文字高度这一块把高度数值改大一些。 以上就是“cad字体不显示数字怎么解决”这篇文章的…

    2022年9月16日
    4100
  • mysql如何统计查询结果

    在mysql中,可以使用COUNT()函数来统计查询结果;该函数用于统计查询结果的行数,返回表中符合特定条件的记录行数。COUNT()函数有三种语法:1、“COUNT(*)”,返回总行数,包含NULL和非NULL值的行;2、“COUNT(字段名)”,返回不包含NULL值的行数,会忽略空值行;3、“C…

    2022年9月22日
    16300
  • 计算机怎么完成信息处理任务

    计算机通过单条指令完成信息处理任务;计算机指令就是指挥机器工作的指示和命令,程序就是一系列按一定顺序排列的指令,执行程序的过程就是计算机的工作过程;信息处理是指获取信息并采用某种方法和设备,按一定的目的和步骤对原始信息进行加工,使之转变成可利用的有效信息过程。 本教程操作环境:windows10系统…

    2022年9月16日
    4700
  • imazing请连接apple设备问题怎么解决

    imazing请连接apple设备解决方法 1、当我们打开imazing看到提示“imazing请连接apple设备”,说明我们没有将手机和电脑连接在一起。 2、这时候我们需要用数据线将手机和电脑连接在一起。 3、连上之后应该会出现如下画面,我们只要在手机上点击“信任”就可以了。 4、如果我们之前正…

    2022年9月16日
    9200
  • 用办公协作思维提升新媒体运营工作效率

    新媒体运营行业是随着互联网发展而来的职位,在每个公司都担任着推广营销的重要工作。它要求相关从业者 “懂营销” ,可以运用良好的推广营销方式,善于利用热点事件,实现有效的品牌或产品营销。除此之外,也要精于内容和策划,对数据分析也要在行。 简单来说就是:“会写文章,能P图,玩的了创意…

    2022年3月20日
    13900
  • vlookup函数怎么匹配两个条件

    vlookup函数匹配两个表格的方法 对比两个表格数据 我们先来看一下这两个表格的数据,为了方便大家查看,小编将两个表格的数据放在了一张图片上 位于左边的是生产计划表的数据,而位于右边的则是库存表的数据。对比两个表格我们可以发现,两个表格中虽然产品品种一样 但是顺序不一样,在数据量少的时候可以通过人…

    2022年9月21日
    13400
  • 如何实现APT34泄密武器报告分析

    APT34是一个来自于伊朗的APT组织,自2014年起,持续对中东及亚洲等地区发起APT攻击,涉猎行业主要包含政府、金融、能源、电信等。多年来,攻击武器库不断升级,攻击手法也不断推陈出新,并且攻击行为不会因为被曝光而终止。 APT34组织背景 4月17日,有国外媒体报道,一个名为“Lab Dookh…

    2022年9月8日
    9400
联系我们
关注微信
关注微信
分享本页
返回顶部
PingCode 比 Jira 更好用的研发管理工具。免费试用