css - 当我将div float 到左侧时，为什么它的左侧有这么多空白空间？

我是trying the shape-outside property，它还不能在Firefox 60.0.1上运行，这很好，因为该浏览器可能尚不支持它，并且由于存在浏览器支持，它在Chrome v66上也可以正常工作。

但是我的问题是：为什么当我指定div#inner时float:left的左边有空白或空白，而在它之前没有任何东西可以浮动到左边？

这是我的页面在Firefox和Chrome浏览器上的外观，然后是代码。

在Firefox v60.0.1上



在Chrome v66上

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%);
}

<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>

最佳答案

我找到了答案，但有些修改。 @connexo在此问题的评论部分中正确。

基本上，我删除了clip-path，然后单击了东西。



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


clip-path和shape-outside彼此不依赖。更具体地说，shape-outside不依赖clip-path的存在。
clip-path不会更改元素的大小。它只会使它看起来小得多。

因此，已被裁剪的元素部分在左侧和右侧仍然存在。仅仅是因为我使shape-outside启用了内联内容可以环绕在div的右侧，所以似乎右侧被剪切了，而左侧没有被剪切。实际上，双方都没有真正被裁掉。他们只是重新绘制，以使视觉外观更小。

关于css - 当我将div float 到左侧时，为什么它的左侧有这么多空白空间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50663779/