CSS Floating：Floats and Float Shapes－O'Reilly 2016（读书笔记）

CSS Floating：Floats and Float Shapes

1. float: left|right|none;
   1. 不能超出其containing block的范围；
      1. 也不能超过其所在行前面的line box元素的top（嗯？）
      2. 冲突：如果浮动元素的宽度高度超过其containing block的范围怎么办？
         1. 默认允许bottom溢出（因为规范只限制了float的left、right、top？）；让我想起了Android里的gravity约束
   2. 必须指定width，否则将设为最小值（一个字符）——这里实际上是CSS布局的局限性，不能启发式地给定一个初始width
      1. 1. Android里的wrap_content布局约束在CSS里只能用table来实现？CSS里的width:auto导致严重的性能问题
   3. 自身变成块级元素（因此margin不会collapse）
   4. 多个floating对象互相之间不会overwriting／overlapping（重叠）：这里实际上隐式依赖于元素的文档顺序
      1. 不过这个规则有点让人感觉奇怪，引入position:absolute|relative;及z-index可以将元素叠起来，为什么浮动却不允许这么做？
2. 负边距
   1. vs position:relative; ？
   2. 超出了containing block的范围会导致外部已经layout好的内容reflow吗？up to the user agent.
   3. 发生了overlap怎么办？（谁显示在上面，注意这里还没有显式的z-index设置）
      1. inline：border、背景、content，全部显示在float元素的上方
      2. block：border、背景在float下方，而content在float上方
      3. 但这种规则只是为了阐明冲突情况下的处理，本身没有什么实际意义吧？
3. clearing
   1. 清除浮动，即不允许前面的float元素下方超出范围
   2. 在CSS1和CSS2中，给元素设置清除相当于增加其top margin（这里，是不是特殊的layout规则都可以通过调整margin等属性做到？）
   3. CSS2.1：clearance（引入额外的spacing概念，而不是增加元素的top margin）
      1. 为保证空白空间，给float元素设置bottom margin
4. Float Shapes（高级图文混排？）
   1. shape-outside: url(shape.png); //用带alpha透明的图片指定（嗯？不是矢量图？）
      1. simple是simple了，但感觉控制粒度不够精细啊？
      2. shape-image-threshold //太扯淡了，我感觉一点都不兴奋
   2. 或<basic-shape> ＋<shape-box>
      1. inset() circle() ellipse() polygon()
         1. inset()指定box的内收缩，可控制round corner，例如：shape-outside: inset(7%) round 5px; //妈的，对圆角矩形太执着了吧
      2. margin-box（默认值） border-box padding-box content-box
   3. 注意，shape-outside不同于设置float元素的border-radius
   4. md，这里对于circle()的讨论有点繁琐，感觉实际意义并不大？
   5. polygon()：注意fill规则nonzero／evenodd，这让人感觉是不是强制应用计算机图形学里的概念？
      1. 多少有点实际意义：拿一张png图片来，然后用Shape Editor插件来定义多边形边界？
   6. shape-margin（呵呵，这个属性让人联想到图像处理里的形态学算法）
5. CSS Shapes，矬