浮动及其形状

[xiongshj]

浮动及其形状

这是学习《CSS 权威指南》第 10 章的笔记。

浮动

在 CSS 中，浮动通过 float 属性实现。

float 取值有三：left、right 和 none（初始值）。

float 属性不继承。

浮动的元素

元素浮动后，其他内容将围绕它流动。

浮动元素四周的外边距不折叠。

如果浮动的是非置换元素，要为元素设定宽度。否则，根据 CSS 规范，元素的宽度趋近于零。

float: none 的作用是彻底禁止元素浮动。

浮动详解

浮动元素的容纳块是最近的块级祖辈元素。

不管元素是什么类型，浮动后得到的都是块级框。

浮动元素与内容重叠

行内框与浮动元素重叠时，其边框、背景和内容都在浮动元素“之上”渲染。

块级框与浮动元素重叠时，其边框和背景在浮动元素“背后”渲染，而内容在浮动元素“之上”渲染。

清除浮动

清除浮动使用 clear 属性，可以取的值有四个：

h3 {
  clear: left; /* 清除左边，右边不受影响 */
}

h3 {
  clear: both; /* 目标元素的两边都不与浮动的元素共存 */
}

h3 {
  clear: right; /* 清除右边，左边不受影响 */
}

h3 {
  clear: none; /* 初始值，不清除浮动 */
}

在 CSS1 和 CSS2 中，clear 起作用的方式是增加元素的上外边距，把元素移到浮动的元素下方。因此，为元素声明的上外边距其实会被忽略。

然而，CSS 2.1 引入了间距（clearance）这个概念。间距是为了把元素向下移动，确保显示在浮动元素的下方而在元素上外边距上方增加的额外空白。这意味着，清楚了浮动的元素，其上外边距不再受到影响。现在，元素下移是因为有这一块间距。

浮动形状

定义形状

若想规定浮动元素周围的内容按什么形状流动，首先要定义一个形状。shape-outside 属性就是这个作用。

（1）shape-outside 初始值为 none，这个时候，除了浮动元素自身的外边距框，没有形状，与常规情况下一样。

（2）使用图像定义浮动形状,内容将流入与之“直接接触”那一侧的透明部分。

img.lunar {
  float: left;
  shape-outside: url("moon.png");
}

<img class="lunar" src="moon.png">

也就是说，上述代码的结果，内容不会同时流入图像的左右两边，而是只流入右边。因为这个图像是向左浮动的，所以与内容直接接触的是右边。

注意，图像必须有透明区域才能定义浮动形状。如果图像格式为 JPEG，或者是没有 alpha 通道的 GIF 或 PNG，得到的形状将是矩形，这与 shape-outside: none 的效果没有任何区别。

（3） 基本形状：

• inset() 内凹形状
• circle() 圆形
• ellipse() 椭圆形
• polygon() 多边形

形状框：

• margin-box
• border-box
• padding-box
• content-box

这些形状框指明形状最外边的界限，可以单独使用。

默认使用外边距框，没有定义形状时浮动框就以外边距为界限。

此外，还可以把形状框与基本形状结合在一起使用。例如,可以这么声明：

shape-outside: inset(10px) border-box;

定义内凹形状时，设定的是从形状框各边向内偏移的距离，可以使用一个到四个长度或百分数值，以及一个可选的圆角值。

例如，下述声明把形状框内缩 2.5em：

shape-outside: inset(2.5em);

这里，形状框的四个内边界都向内偏移 2.5em。此时，型状框是外边界框（默认）。假如想从内边距框向内偏移，要把值改成这样：

shape-outside: inset(2.5em) padding-box;

内凹形状计算向内偏移时可以为形状定义圆角（与 border-radius 类似）。

shape-outside: inset(7% round 5px);

或者圆角是椭圆形的：shape-outside: inset(7% round .5em/5px);，这里宽为 0.5em，高为 5px。

圆形和椭圆形浮动形状的句法十分接近，两种情况下都要定义半径（椭圆需要两个半径）和中心点的位置。

.hello {
  shape-outside: circle(25px);
  shape-outside: circle(25px at center);
  shape-outside: circle(25px at 50% 50%);

  shape-outside: circle(3em at top left);
  shape-outside: circle(50% at top left);

  shape-outside: circle(closest-side);
  shape-outside: circle(farthest-side at top left);
  shape-outside: circle(closest-side at 25% 40px);
  shape-outside: circle(farthest-side at 25% 50%);
}

椭圆形，除了换成 ellipse()之外，椭圆与圆之间在句法上的区别是要定义两个半径。第一个横轴，第二个纵轴。

.world {
  shape-outside: ellipse(25% 50% at center);
  shape-outside: ellipse(25% 50% at 25% 25%);
  shape-outside: ellipse(67% 33% at center);
  shape-outside: ellipse(100% 33% at center left);

  shape-outside: ellipse(closest-side);
  shape-outside: ellipse(farthest-side at top left);
  shape-outside: ellipse(closest-side at 25% 40px);
  shape-outside: ellipse(farthest-side at 25% 40px);
}

多边形形状的句法较复杂，但是却更好理解一些。多边形形状由一系列逗号分隔的 x-y 坐标定义，值可以使用长度或百分数，相对形状框的左上角计算。一对 x-y 坐标指定多边形的一个顶点。

.hi {
  shape-outside: polygon(25px 0, 50px 25px, 25px 50px, 0 25px);
  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50px);
}

跟之前一样，形状绝不会超出形状框，而是会被形状框裁剪。

多边形还有一个独特之处，即可以调整填充规则。默认的填充规则是 nonzero（完全填充），此外还可以使用 evenodd（部分填充）。

.go {
  shape-outside: polygon(nonzero, 51% 0%, 83% 100%, 0 38%, 100% 38%, 20% 100%);
  shape-outside: polygon(evenodd, 51% 0%, 83% 100%, 0 38%, 100% 38%, 20% 100%);
}

使用透明图像定义形状

前面说过，可以使用有透明区域的图像定义浮动形状。图像中任何不完全透明的部分都是形状的一部分，这是默认行为，不过可以使用 shape-image-threshold 属性修改。

这个属性用于指定透明度为多少时允许内容流入。反过来说则是，不透明度为多少时算在浮动形状内。

多 shape-image-threshold: 0.5; 来说，图像中透明度超过 50% 的部分将允许内容流入，而透明度小于 50% 的部分则构成浮动形状。

为形状添加外边距

定义好浮动形状之后，可以使用 shape-margin 属性为形状添加“外边距”。

img {
  float: left;
  margin: 0;
  shape-outside: url("star.svg");
  border: 1px solid hsla(0, 100%, 50%, .25);
  shape-margin: 0; /* 0 是初始值 */
}

小结

原来浮动还能这么好玩。