前言

之前自己较少使用float属性,在月度他人的代码,或者是在使用的时候,总是抱着尝试的方式,并借助于浏览器开发工具,一遍又一遍的尝试,对每次调整的属性值感觉信心不够充足,
而且,还经常的出现,调整了一个属性,导致另外一个属性也跟随者变化,或者出现自己意想不到的效果。
我想要摆脱这样子的困境,我需要从根本上来学习关于float以及float的使用完整规则

浮动

浮动的元素将告诉其父元素容纳块,请将我浮动到您的左侧或者右侧!!!
浮动的元素脱离了常规的文档流,不过对布局仍然有影响,元素设置为浮动后,其他内容将围绕它流动。
⚠️ 以下有两种情况需要特别注意的:

  1. 浮动元素四周的外边距并不会折叠
  2. 非置换元素若设置为浮动,必须🉐️设置它的宽度,否则该元素将趋近与0⃣️。
属性 取值
取值 left/right/none
初始值 none
适用于 所有元素
继承性

基础概念

容纳块:
在深入了解浮动之前,必须要建立容纳块的思维,在之前的学习,我们可以知道,所有的容纳块,其实就是某个子元素所在的最近的块级祖先元素。

使用规则

  1. 浮动元素的左(或者右)外边界不能超过容纳块的内边界,也就是只能到达容纳块的padding的位置
    float元素最左最右只能到达容纳块的内边距
  2. 如果同一个容纳块中有往同一个方向上(同时向左或者向右)浮动的元素,那么后出现的浮动元素,将会在浮动元素的另外一侧挨着摆放,除非内容不够才自动换行;
    往同个方向浮动的元素
  3. 左浮动元素的右外边界不能在右浮动元素的左外边界的右侧;
    同一个横向方向上的浮动元素宽度不能超过容纳块宽度
  4. 浮动元素的顶边不能比父元素的内顶边高(与👆第一点类似);
  5. 浮动元素的顶边不能比前方任何一个浮动元素或者块级元素的顶边高(与第4点类似);
  6. 浮动元素的顶边不能高于文档中出现在浮动元素之前的元素生成的框体所在行框的顶边;
  7. 浮动元素必须放在尽可能高的位置上,正常浮动元素应该放在同一行标签所定义的行框上,只要有足够的空间,它就会向上跑;
  8. 左浮动元素必须尽量向左移动,右浮动元素必须尽量向右移动,位置越高,向左/向右移动的距离越远;
超过容纳块高度的浮动元素

🤔 上述👆的规则只提及到容纳块的左右以及顶部,那么加入浮动元素的高度超过了容纳块的高度,会是怎样的情况??
超过了容纳块的高度的浮动元素
✨ 这里浮动元素超过了容纳块的高度,导致其他元素也挨着它来摆放,而且容纳块的高度,并没有因为浮动元素的高度而被撑开,🤔这里如果想要使容纳块的高度也跟随着
浮动子元素的高度而一起撑开的话,可以是将容纳块也设置为浮动属性的即可,如下图所示:
超过自动撑开的容纳块

✨ 上面的这个例子的第一种情况中,还隐藏着一个知识点:当浮动元素与内容重叠时,行内元素与块级元素的不同表现形式:

不同元素与浮动元素重叠 表现形式
行内元素 其边框、背景和内容都在浮动元素”的上方”渲染
块级元素 其边框、背景都在浮动元素”背后”渲染,而内容在浮动元素之上渲染

效果标注如下:
浮动元素与内容的重叠

负外边距的对浮动元素的影响

浮动元素的负外边距将导致该浮动元素移到父元素的外面,这个好像与👆的规则冲突,实则不冲突
负外边距与浮动不冲突

清除浮动(clear)

有时候,我们不希望浮动元素从一个区域探出,进入另外一个区域,也就是不想因为容纳块中某个元素设置成了浮动,导致其他元素挨着该浮动元素来排,
此时,要禁止其他元素出现在浮动元素的旁边,可以使用clear属性,让目标元素的左边/右边/两边不与浮动的元素共存在同一行

clear属性 描述
取值 left/right/both/none
默认值 none
适用于 块级元素
继承性

使用了clear清除了浮动

浮动形状

有时,我们希望浮动元素周围按照一定的形状来流动,可以使用shape-outside属性来设定

share-outside属性 描述
取值 none/ basic-shape + shape-box / image
初始值 none
继承性

属性使用一览

  1. image,一般的,我们采用png格式的图片,且图片中包含有透明区域的话,当设置为该属性时,其他流动的元素,将会”渗透”至透明部分,就好像是绕着图片来摆放元素一样
    流入浮动元素透明背景的内容
  2. basic-shape与shape-box一般是配合一起来使用的

basic-shape定义的元素的浮动形状,这里定义的浮动形状,其外框正常情况不超出浮动元素框,如果超过的话,超过部分将被直接裁剪掉

basic-shape取值 描述
inset() 内凹形状
circle() 圆形
ellipse() 椭圆形
polygon() 多边形

✨ 这里主要share关于多边形的使用,多边形形状由一系列的逗号分割的(x,y)坐标定义,值可以用长度或者百分比来表示,以元素左上角为坐标原点,向右边x以及向下y延伸,
由多个不同的坐标点集合成为一个闭合的区域,这个形成的闭合区域,将作为浮动的形状!!

shape-box取值 描述
margin-box 这个是定义的默认值定义因浮动导致的其他正常元素的向,从浮动元素的外边距开始流动
border-box 从浮动元素的边框开始流动
padding-box 从浮动元素的内边距开始流动
content-box 从浮动元素的内容开始流动

以下是对应的4种情况的效果图:
share-outside的不同shape-box效果

三方工具(chrome shape editor)

🪐 安装完成了这个插件之后,重启以下浏览器程序,然后进入该插件的使用,切换到开发者模式,审核要处理的图片
安装好css-shapes插件并进入编辑状态
切换编辑状态并拖动编辑
复制最终的浮动形状配置

通过👆的操作,我们可以根据高保真效果,快速配置出我们所想要的浮动形状,控制其他因浮动导致的自动流动摆放特殊多边形(polygon)配置

透明图像自定义形状(shape-image-thresold)

通过该属性的配置,可以控制其他因浮动元素导致的自动流动的元素的位置,与👆多边形的有点类似,只不过是运用了图片的alpha通道来控制了

为浮动图像调价外边距(shape-margin)

当我们在使用浮动元素的时候,使用这个属性,可以调整浮动元素的形状边缘与环绕内容之间的距离

最后更新: 2022年06月13日 13:48

原始链接: https://www.91temaichang.com/2022/04/26/float-use-in-css/

× 请我吃糖~
打赏二维码