为什么将 float 应用于输入会使前面的跨度向上移动几个像素？

Question

我知道这是一个非常简单的案例，但它让我非常头疼。为什么在这个非常非常简单的示例中，浮动无线电会导致前面的跨度向上移动几个像素？这可以以某种方式阻止吗？

好的，澄清一下：float: right 已被注释掉，因此您可以在 jsfiddle 中取消注释它并查看 "Text" 位置变化（就像它居中或应用边距底部一样）。

HTML
<span class="wrap">
    <span>Text</span>
    <input type="radio" class="myRadio"></input>
<span>

CSS
.myRadio{
   /*float: right;*/
}
.wrap{
    width: 15%;
    display: inline-block;
}

http://jsfiddle.net/m4o4epw0/2/

我一直认为，如果您将 float: right 应用于行内块元素之前的行内块元素，则无需移动。

Answer 1

好的好的。现在我明白了。它不是 之前 <span> 向上移动 。原因是，<input> 元素，当它有 DOM space（没有浮动和静态位置）时，它的高度高于 span 并且 span 垂直底部对齐。

当您为该实例提供 float: right 或任何其他浮点数或位置时，它不会占用 DOM space 并且您会看到 <span> 有自己的高度。

您可以通过在父级上使用 overflow: hidden 使 floated 元素采用 DOM Space，如下所示。

查看此处的示例：

.wrap {width: 75px; display: inline-block; border: 1px solid #999;}
.float .myRadio {float: right;}
.ovh {overflow: hidden;}

<h4>Without Float</h4>
<span class="wrap">
  <span>Text</span>
  <input type="radio" class="myRadio" />
</span>

<h4>With Float</h4>
<span class="wrap float">
  <span>Text</span>
  <input type="radio" class="myRadio" />
</span>

<h4>With Float</h4>
<span class="wrap float ovh">
  <span>Text</span>
  <input type="radio" class="myRadio" />
</span>

为什么将 float 应用于输入会使前面的跨度向上移动几个像素？

Why does applying float to input make preceeding span move few pixels up?

css

radio-button

css-float