我们经常看到这样的网页内容排版：图片被固定在某一个区域(div)内，然后文字环绕着它。这要用到什么技术呢？Javascript？其实，只用纯CSS就能实现，并且代码超级简单。
下面是代码
HTML
纯CSS：将图片漂浮固定在某DIV内右下角html技术
2021-06-24 14:18:32
CSS
.wrapper{display:flex;border:1pxsolid;overflow:hidden;resize:horizontal;margin-bottom:100px;}.box{text-align:justify;font-size:20px;}.float{float:right;height:100%;margin-left:15px;display:flex;align-items:flex-end;shape-outside:inset(calc(100%-100px)00);}
代码分析
1、我们需要一个wrapper（包装）元素来包含所有内容，我们在其上使用flexbox。Flexbox允许我们依赖默认stretch对齐方式以便以后使用height:100%。
2、我们的.float元素将占据文本内容旁边的整个高度。在这个元素中，我们使用flexbox对齐将图像推到底部。
3、shape-outsideCSS属性定义了一个形状——它可能是非矩形的——相邻的内联内容应该环绕在它周围。默认情况下，内联内容环绕其边距框；shape-outside提供了一种自定义这种环绕方式的方法，从而可以将文本环绕复杂的对象而不是简单的框。
换句话说，shape-outside设置内容围绕元素的边界框流动的方式。
它需要多个值。其中之一是inset()功能，同样，定义一个插入矩形。当提供所有前四个参数时，它们表示从参考框向内的顶部、右侧、底部和左侧偏移，这些偏移定义了插入矩形边缘的位置。
因此，shape-outside:inset(calc(100%-X)00)我们可以创建一个刚好从图像顶部开始的插入矩形。顶部等于100%-X，其中X是图像高度，100%是.float元素的高度。这允许文本在图像顶部的可用空间内换行。这是响应式的，而且我们可以轻松地在左右之间切换（通过调整float属性）。
想要更多？
通过设置shape-outside属性，我们可以得到更多图像位置和不同形状的展示。
THE END