浮动元素位置更改元素对齐方式

Question

[我有float的某些奇怪行为，以为这很简单，但是我是CSS的新手，正在学习为什么以及如何提问。

这里，当我将float元素应用于button时，它将元素的水平中心对齐更改为顶部，不确定原因。

任何帮助将不胜感激。

<h2>Image Text</h2>
<p>Center text in image:</p>

<div style="border: 1px solid red;">
  Text on left
  <span><button style="height:40px;">test</button></span>
</div>

现在添加

<span ><button style="height:40px;float:right">test</button></span>

我知道这个问题可以通过多种方式解决，我只是想知道带float的这些元素的奇怪行为。

关于MK

Answer 1

如果在overflow: auto;上添加line-height: 40px;和div，则会得到所需的结果：将line-height设置为父元素的height值居中（单行）文本，然后overflow: auto将父元素包装浮动的子元素，否则情况并非如此（就像您遇到的问题一样）：

div {
  overflow: auto;
  line-height: 40px;
}

button {
  float: right;
}

<h2>Image Text</h2>
<p>Center text in image:</p>

<div style="border: 1px solid red;">
  Text on left
  <span><button style="height:40px;">test</button></span>
</div>

Answer 2

添加div高度，并浮动到按钮上。（这也可以写为内联CSS样式）]

div{height:40px;}

button { float: right;}

Answer 3

向容器添加高度不是最佳解决方案，因为如果内容发生变化，则高度也必须更改。父级上的overflow:auto;可以使用，但是它也引入了设计限制。

您遇到的问题与容器没有自动清除包含的浮点有关。您需要在容器上使用称为clearfix的东西。有很多方法，但是我通常使用的一种方法是使用伪元素并返回到ie8：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

使用样式表中的CSS规则，您只需将class="clearfix"添加到需要清除其自己的子代的任何容器中。

有关浮动信息的更多信息，this是不错的文章（（向下滚动至“大崩溃”，以了解您面临的特定问题），并了解有关clearfix的更多信息，this文章解释了各种clearfix如何工作。

为clearfix使用伪元素的优点是，我们完全不必更改实际父元素的样式，而对父元素样式的更改可能会与设计要求发生冲突（例如，添加overflow:auto;可以，但是可能与需要在该父元素上使用overflow:hidden;或overflow:visible;的设计冲突）：

这里是您应用了clearfix的代码（请注意，我将样式规则移至CSS并添加了类，而不是内联样式，这通常是一种好习惯）：

.container {
  border: 1px solid red;
}
button {
  height:40px;
}
.float-right {
  float: right;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<h2>Image Text</h2>
<p>Center text in image:</p>

<div class="container clearfix">
  Text on left
  <span><button class="float-right">test</button></span>
</div>

Answer 4

要了解正在发生的情况，您需要考虑以下事实：默认的垂直对齐方式是baseline，它将创建第一个输出。

以下是查看基线的更好图示：

.box {
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:14px;
  height:1px;
  background:blue;
  left:0;
  right:0;
}

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;">test</button></span>
</div>

您可以清楚地看到两个文本对齐相同，并且按钮以某种方式定义了基线。您的文字不像您想的那样居中。

增加font-size以查看会发生什么：

.box {
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:14px;
  height:1px;
  background:blue;
  left:0;
  right:0;
}

<div style="border: 1px solid red;" class="box">
  <span >Text on left</span>
  <span><button style="height:40px;">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  <span style="font-size:20px;">Text on left</span>
  <span><button style="height:40px;">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  <span style="font-size:30px;">Text on left</span>
  <span><button style="height:40px;">test</button></span>
</div>

我们仍然具有相同的基线逻辑而不是居中逻辑。

另一个例子是按钮的高度较小

.box {
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:9px;
  height:1px;
  background:blue;
  left:0;
  right:0;
}

<div style="border: 1px solid red;" class="box">
  <span style="font-size:40px;">Text on left</span>
  <span><button style="height:20px;">test</button></span>
</div>

仍然是相同的基线。

---

您可以通过更改垂直对齐方式来更改此行为。

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;vertical-align:bottom">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;vertical-align:top">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;vertical-align:sub">test</button></span>
</div>

---

现在，如果您将按钮向右浮动，它将成为块级元素，并且将不再影响文本的对齐，因此您将获得以下输出：

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;float:right;">test</button></span>
</div>

即使清除浮标以解决高度问题，文本也将保留在顶部，并在其行内的基线上更加精确地对齐。

.box {
  overflow:auto;
}

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;float:right;">test</button></span>
</div>

现在将文本放在红色方框内居中是一项常见的工作，您会发现很多与此有关的问题。像其他答案中所述的一种解决方案是设置line-height，这将仅增加行的大小并围绕中心移动文本的基线。

一些相关问题，以获取更多示例和详细信息：

Vertical-align aligns everything else except self

Vertical align not working on inline-block

Why is this inline-block element pushed downward?

---

另一个需要注意的重要事项是如何将按钮移到其span容器之外。添加边框以查看此内容：

.box {
  overflow:auto;
}

<div style="border: 1px solid red;" class="box">
  Text on left
  <span style="border:2px solid blue;"><button style="height:40px;float:right;">test</button></span>
</div>

另一个相关原因，以了解原因：Can you float to the right of a span?