为什么这个 HTML 有效答案

【问题标题】：Why this HTML works为什么这个 HTML 有效
【发布时间】：2018-10-03 19:43:11
【问题描述】：

我试图弄清楚为什么下面示例中的 HTML 代码有效。目标是将按钮放在行的左侧，并用输入元素填充行的所有现有空间。

我找到了解决方案

<html>
<body>

<style>
button {
    float: left;
}
p {
 overflow:auto;
}

input {
    width: 100%;
}

</style>

     <button>Search</button>
     <p><input type="text" title="Search" /></p>

</body>
</html>

当我读到它时.. 按钮是左浮动的块元素。所以它应该是行的最左边的元素，盒子大小足以容纳“搜索”字。

p元素是块元素，它的盒子应该包含按钮的盒子，因为它是向左浮动的。

输入元素的宽度是其父元素的 100%，所以它应该是行的宽度。所以它的盒子不应该放在带有按钮的线上，所以应该引入换行符......但它没有，并且由于某种原因一切都在工作......，我不知道为什么。而如果你删除"overflow:auto"，实际上会引入换行...

【问题讨论】：

overflow:auto 的使用改变了它与floated 元素的交互方式。
如果带有overflow:auto 的块元素没有减小宽度以避免浮动，则右浮动元素会部分或完全遮挡滚动条，从而使页面难以使用。

标签： html css css-float

【解决方案1】：

这是因为 float:left;以及p标签的溢出

如果您尝试将溢出移至输入输入表单将在断线上且为 100%；

看：https://jsfiddle.net/qgykwxea/

代码：

button {
    float: left;
}

input {
    width: 100%; overflow-x:auto;
}

【讨论】：