需要在右側或左側佈置一個元素，以使文本包裹在其周圍嗎？對於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中文網其他相關文章！
