需要在右侧或左侧布置一个元素，以使文本包裹在其周围吗？对于Float属性来说，这是一项简单的任务。但是，如果您还想将该元素（让我们称为图像）将其推向底部的一个角落之一，那又如何呢？听起来有些棘手，对吧？我们可能需要JavaScript？
不，很少有（棘手的）CSS可以做到！这是仅CSS的解决方案，无论大小和内容的尺寸和内容如何，都可以使您的图像粘在底角。
调整包装元素的大小，并看到工作中的魔力：
让我们剖析代码。
我们需要包含所有内容的包装元素，并且我们将在其上使用Flexbox。 Flexbox使我们能够依靠默认的拉伸对齐方式来以后使用高度：100％。
<div>
<div>
<div> <img alt="将元素浮动到底角" > </div>
lorem ipsum dolor ...
</div>
</div> .wrapper {
显示：Flex;
}
。漂浮 {
浮点：对；
身高：100％；
显示：Flex;
准项目：flex-end;
Shape -Outside：插图（计算（100％-100px）0 0）;
}.wrapper中的.box是我们的flex项目。我们不需要将任何特定的CSS应用于盒子。它定义了包装纸的高度，同时将其延伸到相同的高度。这种行为将为我们提供一个“参考高度”，可以由子元素使用。
从规范中：
如果弹性项目具有对齐的自我：strave，重做其内容的重做布局，则将使用的尺寸视为其确定的交叉大小，以便可以解决百分比大小的孩子。
关键字是确定的，它允许我们安全地使用框元素内部的百分比（％）高度。
由于上面详细介绍的高度计算，我们的.float元素将占据文本内容旁边的整个高度。在此元素内部，我们使用Flexbox对齐将图像推到底部。
现在，使用Shape-Outside属性来实现真正的技巧。这是MDN定义的方式：
Shape-Outside CSS属性定义了一个形状（可能是非矩形），相邻内联内容应包装。默认情况下，内联内容包裹在其边距框上； Shape-Outside提供了一种自定义此包装的方法，使得可以将文本包裹在复杂的对象上，而不是简单的框上。
换句话说，Shape-Outside设置了内容在元素的边界框中流动的方式。
它需要多个值。其中之一是插图（）函数，它再次根据MDN：
定义一个插图矩形。当提供前四个参数的所有参数时，它们代表了从参考框内的顶部，右，底部和左侧偏移，该框中定义了插图矩形边缘的位置。
因此，使用Shape -Outside：Intset（calc（100％-x）0 0），我们可以创建一个插图矩形，该矩形正好从图像的顶部开始。顶部等于100％-x，其中x是图像高度，100％是.float元件的高度。这允许文本包裹在图像顶部的自由空间内。这是响应迅速的，加上我们可以轻松地在左右之间切换（通过调整Float属性）
就是这样！唯一的主要警告是您需要知道图像高度。
我们仍然可以稍微优化代码，并删除图像周围的额外包装器。
<div>
<div>
<img alt="将元素浮动到底角" >
lorem ipsum dolor ...
</div>
</div>然后我们的CSS将成为
.wrapper {
显示：Flex;
}
。漂浮 {
浮点：对；
身高：100％；
宽度：100px;
Shape -Outside：插图（CALC（100％-100px / *高度 * /）0 0）;
对象拟合：包含；
对象位置：底部；
}由于我们删除了额外的包装器，因此我们需要另一种技术将图像放在底角。为此，我们使用对象拟合和对象位置，但必须明确指定图像的宽度。
使用此方法，我们需要知道图像的宽度和高度与以前仅需要高度的代码不同。
我们可以进一步扩展这个概念，以说明更典型的情况。例如，我们可以将图像向右浮动，但是将其固定在盒子的中间，并以合理性为中心：中心：还将插图矩形从插图（calc（100％-x）0 0）更改为插图（calc（50％-x/2）0 0 0 0 0 0），将插图矩形调整到中间。
我们还可以在两个底角上浮动两个图像：
这里没什么复杂的。我只是两次使用相同的浮动元件，一次在右侧，然后在左侧。当我们可以将图像放在所有四个角落时，为什么要在两个角落停下来：
同样的基本想法也在这里发挥作用，但是我们也依靠顶级图像的共同浮点功能。但是，您会注意到这是该概念开始分解的地方，并且根据包含框的大小，我们会得到一些不必要的溢出。我们可以使.float元素的高度大于100％，并应用一些“魔术数”，从而通过调整图像的填充和边距来平滑事物。
您是否知道Shape-Outside接受Radial-Gradient（）作为值？我们可以使用它放置如下：
梯度的透明部分是文本可以进行的可用空间。您可能已经注意到，我们也将边界拉迪乌斯应用于图像。 Shape-Outside属性将简单地影响.float元素，我们需要手动调整图像的形状，以遵循由Shape-Outside定义的形状。
当我们使用时，让我们将其与先前的示例结合起来，该示例使用Justify-content：中心将图像固定到盒子的垂直中心：
另一种径向级别（）以及另一种边框 - 拉迪乌斯配置。
我们本可以使用线性级别（）而不是为包装区域形成三角形形状：
这是我们用于径向级别（）的想法。最大的区别是，我们使用剪贴式路径而不是Border-Radius来剪裁我们的图像。
而且，由于我们为其他人做了，所以让我们使用Justify-content：中心想法将图像固定到盒子右边缘的垂直中心：
我们在上面的演示中使用了圆锥分子（），并带有形状外侧，以定义三角形的形状和夹子路径以在图像上获得相似的形状
在图像具有装饰性的情况下，所有这些示例仍然可以使用较少的代码进行优化（对于SEO目的而言，HTML内部不需要时）。让我们用伪元素替换.float元素，然后将图像应用于背景：
我们正在使用蒙版来显示所需的图像的部分，并且猜猜它使用与Shape-Outside相同的值！因此，我们要做的就是定义形状的一个值。
这里有很多可能性不仅在拐角处放置矩形，而且要使用任何相同的代码结构，在任何位置上的任何形状。我们只需要：
然后，即使在响应式设计中，一切都将其放置。
以上是将元素浮动到底角的详细内容。更多信息请关注PHP中文网其他相关文章！
