为什么我的div在左侧浮动时左侧有如此多的空白空间？

Question

我是trying the shape-outside property但它还没有在Firefox 60.0.1上运行，这很好，因为该浏览器可能尚不支持它，并且它在Chrome v66上确实有效因为存在浏览器支持。

但我的问题是：当我指定div#inner时，为什么我的float:left左侧有空格或空格，并且它前面没有任何东西浮动到左边？

以下是我的网页在Firefox和Chrome浏览器上的显示方式，然后是代码。

在Firefox v60.0.1上

在Chrome v66上

＆＃13;

＆＃13;

div#outer {
  border: 2px solid green;
}

div#inner {
  float: left;
  
  font-family: Verdana;
  font-size: 10em;
  border: 12px solid rgba(255, 0, 0, 0.5);
  width: 80%;
  overflow: hidden;
  text-align: center;
  padding: 20px;
  margin: 10px;
  
  background-color: cyan;
  background-clip: padding-box;
  
  clip-path: circle(50%);
  
  shape-outside:  circle(50%);
  -webkit-shape-outside:  circle(50%);
}

＆＃13;

<div id = "outer">
  <span>Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world!</span>
  <div id = "inner">Foo bar</div>
<span>Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world! Hello, world! Hello world!</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我找到了答案，有点修修补补。 @connexo就在这个问题的评论部分。

基本上，我删除了clip-path和点击的内容。

以下是一些观察结果，澄清了我的一些误解：

1. clip-path和shape-outside不相互依赖。更具体地说，shape-outside不依赖clip-path。

的存在

2. clip-path不会更改元素的大小。它只会使显示小得多。

   因此，元素的一部分被剪裁在左侧和右侧仍然存在。就是这样，因为我shape-outside允许内联内容环绕我的div的右侧，看起来右侧被剪裁但左侧没有。实际上，两个方面都没有被剪裁。它们只是重新绘制，以使视觉外观更小。