这里是浮点数在CSS中的工作方式

封面照片由J A N U P R A S A D通过Unsplash。

还有其他人还记得过去使用浮动布局的日子吗?我们曾经不得不在雪地,赤脚,两种方式上坡。这些天使用flexbox和他们的网格鞭打者……

在任何情况下,浮动仍然适用于非大规模布局的事物。即使您最终不希望在最新的应用程序中使用它们,您最终可能会维护一个旧的遗留应用程序,该应用程序使用严格的浮动方法。掌握如何工作的基本知识可以在各种情况下派上用场。

另外,花车是CSS最大的担忧之一。应用浮动并让页面上的所有内容突然转移(并且不知道为什么)是我们许多人所做的事情。让我们今天克服那个绊脚石。

所以,让我们直接进入并检查浮子的神秘面纱。

基础

这就是花车最擅长的:围绕其他东西的流动文本。浮动是模仿打印布局的最佳方式。

发生的事情很简单,这个:

  1. 浮动元素放置在原本可能的位置
  2. 它从正常的文档流中删除,尽可能向左或向右推
  3. 之后的元素将围绕浮动元素排列

我可以漂浮中心吗?

不。我知道它会很酷,但它不起作用。

我想你会想象如何实现这个文本和猫图片版本。你怎么会整齐地打破文本?没有好办法做到这一点。这可能就是它从未实施过的原因。

浮动不在正常的文件流程中?那就像“位置:绝对”?

不完全的。元素与 position: absolute (或类似的属性)完全从文档流程中删除。绝对定位的元素通常可以最终位于其他附近元素的顶部或底部,因为它们完全相互忽略。

当一个元素浮动时,它不完全在正常的文档流中,但它确实与其他元素交互;它们受制于特殊的定位规则,主要是它们会围绕它进行安排。

花车不想大

没有明确大小设置的浮动元素将“缩小以适应”其内容 – 也就是说,它将只占用所需的宽度。如果里面的内容不多,那就不会很大;如果有很多,它会变得更大。你可能在之前看到过类似的行为 position: absoluteposition: fixed 元素。

预测浮标的去向

当你在玩Jabberwocky的例子时,你碰巧找到了这样的东西吗?

人们倾向于避免浮动的原因之一是它们似乎无法预测。如果一系列不同高度的浮子溢出它的线会发生什么?

我们来看看浮动元素的定位规范:

(…)当一个元素浮动时,它被从文档的正常流中取出(尽管仍然是它的一部分)。它向左或向右移动,直到它接触其包含盒子的边缘或另一个浮动元素。

因此,当我们拥有适合我们宽度的东西时,一切都很精致和花花公子。当它没有时,它会向下移动并浮动一些,直到它碰到它想要停在的边缘 – 它的父容器的边缘或另一个浮子。

为什么最后一个没有向上移动以填补那个可怕的空白?

浮点数永远不会位于HTML顺序之前的某个位置之上。

然而,它会尽可能地“浮动”,并牢记这一限制。

边距,框模型和HTML顺序

在基本的例子中,你是否为此烦恼?

我们需要的是保证金。如果您随机选择,您有大约1/3的机会猜测应用保证金的元素。尽管随机猜测是CSS的本质,但让我们试着了解浮点数在这里做了些什么。

#1 – 如果你向外部容器添加margin-left会发生这种情况 #container – 它只是推动了一切。这并没有真正解决浮动框出现问题的问题。可能没有人试图以这种方式修理花车,除了凌晨3点,绝望地哭泣。 (谁没去过那里?)

#2 – 这是你可能实际尝试过的东西 – 应用一个 margin-left 到文本本身。然而,文本的边距是基于文本的“框” – 如果浮动不在那里,文本将是。 (您可以将其描绘为在浮动元素下方具有边距。)

文本本身仍像以前一样在浮动周围流动,但它相对于其父元素有一个余量。 margin属性不能为文本添加“Z字形”边距,并且它必须与由边距表示的父元素分开,因此与float的分离不会发生。

#3 – 边距被添加到实际浮动元素,扩展其框。文本将围绕整个浮动框流动,包括边距。所以加入 margin-right 我们的左浮猫和 margin-left 对我们的右浮猫会给文本留出一点空间。

总之 – 将浮动元素上的边距放在合并浮动框的周围会导致其他内容流动,包括任何边距。

我们在这里得到的想法就是这样 – 页面上的其他东西在浮动周围移动,而不是浮动在页面上的其他东西周围移动。

我们还可以将浮子堆叠在一起漂浮物将很好地放置在其他漂浮物旁边,并且文本将在它们周围流动。

请注意,放置浮动的HTML顺序非常重要。如有疑问,浮标首先出现。假装你是浏览器,并且你正在“按顺序”阅读HTML – 你想知道你的浮动内容首先在哪里,所以你不必重新绘制所有必须在它之后流动的东西。

清除浮子

一个元素与 clear 它上面的属性描述了该元素如何与附近的浮动元素交互。你可以在浮动事物和非浮动事物上放置一个明确的属性。

明确的财产意味着:我不希望在我这附近有任何花车

由于在页面上推送其他东西是很粗鲁的,如果附近有一个冲突的浮动,那么具有明确属性的元素将向下移动。将清算元素视为社交尴尬和冲突避免。

浮动不会像你期望的那样占用空间

如果您之前使用过浮动,您可能已经发现自己处于这个位置:

#container 保持所有浮动(并且只有浮动)已经崩盘。这是因为浮动元素会将其从普通文档流中删除,并且周围的容器不会创建新的块格式化上下文。

记得我上面说的时候:

它从正常的文档流中删除,尽可能向左或向右推

“从文档流程中删除”在这里有意义和技术后果

由于我们的CSS管理员指定的规则,容器的高度由“正常文档流程内”的所有内容决定。但是,我们也可以将容器设置为“块格式化上下文” – 有点像页面中的迷你布局 – 告诉容器它需要将自己视为一个迷你文档,因为它延伸到适合所有内容,甚至是不合时宜的内容。

我们需要做一些令人信服的让容器伸展以适应我们的花车,但我们知道我们有选择。

几种可能的解决方案:

1.创建一个流入的元素,但是在浮点数之后

这是 clearfix-type-one 笔在上面的解决方案。它也是“老派”的clearfix。

我们现在知道容器将伸展以适应其流动中的所有元素,并且浮子不在流动中。所以我们需要一个非浮动元素,它放在我们的浮动元素之后。我们可以使用 clear 属性:

 id="container">    class="floaty-left" src="https://placekitten.com/100/200">    class="floaty-left" src="https://placekitten.com/100/100">    class="floaty-left" src="https://placekitten.com/160/200">    class="floaty-left" src="https://placekitten.com/100/120">    style="clear: both;"> 

这将导致容器延伸到我们清除的div。

但是,该元素将有一些自己的高度(因为它应该在里面有一些文本),所以我们可以添加像 height: 0 在继续应用clearfix时确保它不会影响容器的高度。多年来,我已经看到了其他方法,例如使用 max-height 乃至 font-size: 0。 ¯ _(ツ)_ /¯

由于这仅用于显示而不是语义,我们也可以将其移动到 ::after 应用于容器的伪元素。

这就是我们最终得到如下内容的方式:

  // the "basic" clearfix with after   &.clearfix-type-one {     background-color: #644;     &::after {       content: " ";       display: block;       height: 0;       clear: both;       visibility: hidden;     }   } 

这可以进一步完善;网上有很多类似的解决方案。例如,2011年的Nicholas Gallagher的微清晰度。这种类型的Clearfix解决方案往往具有惊人的跨浏览器支持,因为它们已经存在了近十年。

2.使用 overflow: hidden 创建一个新的块格式化上下文

(从技术上讲,你可以使用任何不可见的溢出值,但隐藏的是最适合的溢出值。请给我一点解释……)

这是 clearfix-type-two 笔在上面的解决方案。来自MDN文档:

块格式化上下文包含创建它的元素内部的所有内容。

因此,强制父容器形成新的块格式化上下文将强制它扩展,因为它必须完全包含其所有子项。它仅使用一个属性完成,那么为什么这不是最好的解决方案呢?为什么列表中只有三个中的第二个?

嗯……你正在使用 overflow: hidden。这不是无后果的;你必须处理一个容器,它本身没有显示任何东西。如果我们还希望在我们的某些元素上留下一些彩虹阴影,这些元素会被剪裁,或者在我们的盘点外面有绝对定位的闪光?为了清除我们的花车,摆脱那些将是疯狂的。

你可以看到这将是一个什么样的讽刺。

还记得我之前说过你可以使用任何不可见的溢出值吗?那么,想象看起来有多糟糕 overflow: scroll 在侧面创建滚动条。大呀。

3.使用 display: flow-root 创建一个新的块格式化上下文

这是 clearfix-type-three 笔在上面的解决方案。

与上述解决方案不同,这意味着在固有层面上工作,而不是“黑客”。从规格:

该元素生成一个块容器框,并使用流布局布置其内容。它始终为其内容建立新的块格式化上下文。

所以这基本上和我一样 overflow: hidden,但没有副作用。 ✨

这听起来就像我们想要的不使用它的原因是跨浏览器支持 – 目前几乎30%的设备都不支持它,Safari和IE / Edge一如既往地成为儿童的问题。

您还想了解浮子的其他信息?

由Cristina Gottardi在Unsplash上​​的页脚照片。

资讯来源:由0x资讯编译自DEV,原文:https://dev.to/tchaflich/here-s-how-floats-work-in-css-13eg ,版权归作者所有,未经许可,不得转载
你可能还喜欢