css浮动以及实现文字环绕

一、浮动是作用于自身之后的元素的属性。使用浮动属性，也就是脱离了文档流，之前占用的位置被空出来，所以之后的元素会补充它原来的位置。而当两个元素都使用了浮动时，它们就位于同一个级别会按照顺序排列。在使用浮动之前通常会使用一个父盒子包裹元素，然而使用了浮动之后的子元素由于脱离文档流而无法撑开父元素高度，但是仍然会受到父盒子的margin和padding的影响。有三种解决方式：1.在使用浮动的子元素之后写一个逻辑块元素。2.使用伪元素 3.利用BFC机制，使用overflow。

子元素无法撑开父元素 使用逻辑块模式  使用伪元素 使用overflow

二、使用clip-path属性和shape-outside可以实现向world一样的文字环绕效果

shap-outside属性定义了文字相对于元素的位置，可以将文本包装在复杂对象周围而不是简单的框中。

最简单的一种属性设置方法

clip-path（裁剪路径，类似于ps工具里的钢笔）用于浮动显示区域形状定义。常见的属性值设置有圆形、椭圆形以及多边行。

clip-path:circle(50% at 0 100%)【圆的大小、圆心坐标】、ellipse（20% 30%）【椭圆横轴大小、纵轴大小】polygon（50% 0, 0 100% ，100% 100%）【三角形三点坐标】

属性值设置 设置效果

最后还有一个特殊的是图片的文本绕排也可以使用shape-outside：url(路径)，但是图片必须是有透明度的png图片。不然也可以直接根据形状来设置shape-outside属性。