WEB基础之：CSS浮动和嵌入形状
浮动和嵌入形状 Floating and Shapes
1. 浮动Floating
float属性允许浮动任何元素，如：图像、段落、列表。
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
p {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em; border: 1px solid;}
img {float: left; width: 160px; margin: 25px;}
1.1 控制浮动元素摆放的规则
- 浮动元素的左(或右)外边界不能超出其包含块的左(或右)内边界。
- 防止元素彼此覆盖，浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(右浮动)元素的右(或左)外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
- 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。右浮动元素的左外边界不会在其左边左浮动元素的右外边界的左边。这条规则避免浮动的元素重叠。假如网页正文的宽度是500像素，内容里有两个图像，都是300像素宽。第一个图像向左浮动，第二个图像向右浮动。根据这条规则，第二个图像不会与第一个图像出现100像素宽的重叠区域。事实上，第二个图像的顶边将正好在左浮动图像的底边以下。
- 一个浮动元素的顶端不能比其父元素的内顶端更高。
- 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
- 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
- 浮动元素不能超出其包含元素的边界。左(或右)浮动元素的左(或右)边有另一个浮动元素，前者的右外边界不能在其包含块的右(或左)边界的右(或左)边。如果没有足够的空间，浮动元素会被挤到一个新的“行上”
- 浮动元素必须尽可能高地放置。即满足其他约束条件的前提下，浮动得尽可能高。
- 左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。
1.2 应用行为Applied Behavior
-
浮动规则只处理了浮动元素和其父元素的左、右和上边界；没有涉及下边界。
-
浮动元素会延伸从而包含其所有后代浮动元素。
-
负外边距可能导致浮动元素移到其父元素的外面。当浮动元素比其父元素更宽，浮动元素会超出其父元素的左右内边界，从而尽可能正确的显示。
-
对于行内元素：
- 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示。 - 块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示。
1.3 清除Clearing
clear 属性规定元素的哪一侧不允许存在浮动元素。
| 属性值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| top | 在顶部不允许浮动元素。 |
| bottom | 在底部不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
clear: both;
注：大多数情况下，无法知道一个元素周围多大范围内不允许有浮动元素，要确保一个设置clear属性的元素的顶端与一个浮动元素的底端之间有一定空间。可以为浮动元素本身设置一个下外边距。如：
img {
float: left; margin: 0 0;
}
2. 嵌入形状Shapes
2.1 shape-outside属性
shape-outside 属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。
| 属性值 | 描述 |
|---|---|
| none | 浮动区域不受影响，行内元素以默认的方式包裹着该元素的margin box。 |
| shape-box | 根据浮动元素的边缘（通过 CSS box model 来定义）形状计算出浮动的区域。可能是 margin-box, border-box, padding-box, 或者 content-box。这个形状包括了由 border-radius 属性制造出来的弧度（与 background-clip 的表现类似）。 |
| basic-shape | 基于 inset()， circle()， ellipse()， 或者 polygon()其中一个创造出来的形状计算出浮动区域。如果同时存在<shape-box> ，那么会为 <basic-shape>方法定义一个参考盒，这个参考盒默认为 margin-box 。 |
| image | 提取并且计算指定<image>的alpha通道得出浮动区域（译者：即根据图片的非透明区域进行包裹）。就跟通过 shape-image-threshold来定义一样。 |
2.1.1 shape-box的类型
-
margin-box
定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的border-radius 和margin 的值决定。如果 border-radius / margin 的比率大于等于 1 , 那么这个 margin box 的角的弧度就是 border-radius + margin ；如果比率小于 1，那么这个 margin box 的角的弧度就是 border-radius + (margin * (1 + (ratio-1)^3)) 。 -
border-box
定义一个由边界的外边缘封闭形成的形状。 这个形状遵循正常的边界外部圆角的形成规则。 -
padding-box
定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则。 -
content-box
定义一个由内容区域的外边缘封闭形成的形状（即：被padding包裹的区域，在chrome控制台中的盒子模型图中的蓝色区域。）。每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。
2.1.2 basic-shape的类型
-
inset() ：定义一个矩形范围。
inset( <shape-arg>{1,4} [round <border-radius>]? )四个参数遵循以下原则：
-
top right bottom left`。这些值围着元素从上(top)顺时针旋转，如果想呈现你想要的效果，就必须正确安排值的顺序。
-
值复制：当其中一个值缺省的时候，将会按照以下规则：如果为外边距指定3个值，则第4个值将会从第2个复制得到。如果给定两个值，第4个值会从第2个值复制得到，第3个值会从第1个值得到。
-
-
circle()：定义一个圆形范围。
百分数的值等于
sqrt(width^2+height^2)/sqrt(2).circle( [<shape-radius>]? [at <position>]? ) -
ellipse()： 定义一个椭圆范围。
ellipse( [<shape-radius>{2}]? [at <position>]? ) -
polygon()：定义一个多边形范围。
path( [<fill-rule>,]? <string>)
2.1.3 语法
/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url> 值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;
举例：
img.plane {
float: left;
shape-outside: url(images/paperplane.png);
height: 160px;
}
<img class="plane" src="images/paperplane.png" alt="papaer plane">
2.2 shape-margin
shape-margin 用于设定由shape-outside创建的CSS形状的外边距。
shape-margin: 0;
shape-margin: 20px;
shape-margin: 1em;
shape-margin: 5%;
