html - float 在影响兄弟元素高度的元素上，Wy？

Question

我只是想建立我自己的自定义搜索框，我几乎成功了，我保持代码非常干净整洁，看看:

HTML:

<div class="inline-form">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control">
            <div class="input-group-addon">0.00</div>
        </div>
    </div>
</div>

CSS:

.inline-form >* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 20em;
    background: pink;
}
.form-group {
    display: inline-block;
    margin-bottom: 0px;
    vertical-align: middle;
}
.input-group {
    display: inline-table;
    vertical-align: middle;
}
.input-group-addon {
    width: auto;
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #EEE;
    border: 1px solid #CCC;
    border-radius: 4px;
}
.input-group-addon:first-child {
    border-right: 0 none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px
}
.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.input-group > .form-control {
    width: auto;
    display: table-cell;
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0px;
    vertical-align: middle;
}
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #CCC;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
.input-group-addon:last-child {
    width: auto;
    border-left: 0px none;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

FIDDLE HERE :: - 工作得很好..

现在，如果我从 .input-group > .form-control 中删除 float:left，就会发生一些非常困惑的事情，请看下面的屏幕截图:

为什么会这样？为什么在 .form-control 上 float 会影响其兄弟元素？

附言:我的代码运行良好，我只是想知道为什么在 CSS 中会发生这种情况？

谢谢。

亚历克斯-z。

Answer 1

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

https://developer.mozilla.org/en-US/docs/Web/CSS/float

... 所以一般来说，当你 float 一个元素时，你就是在将它从它的正常流中取出。它会根据它的容器元素改变它的位置...因此，如果您在此容器中有更多元素，那么您可能还需要为这些元素应用相关的 css，例如 clear:both;。