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 :: - 完美无缺......

现在，如果我从float:left中移除.input-group > .form-control，发生了一些非常混乱的事情，请看下面的屏幕截图：

enter image description here

为什么会这样？为什么浮动.form-control会影响它的兄弟元素？

P.S。：我的代码工作正常，我只是想知道为什么会在CSS中发生这种情况？

谢谢。

亚历-Z。

Answer 1

float CSS属性指定应该从中获取元素正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。

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

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

Answer 2

您正在寻找的具体答案来到这里。你需要记住它。

当元素浮动时，浏览器计算其父元素的高度不再考虑它。以此<ul>为例，其中包含浮动的<li>：

＆＃13;

$(document).ready(function() {
   $('ul').on('click', function() {
       alert($(this).height()+"px");
   });
});

＆＃13;

ul.floating-children {
  background-color: red;
  list-style-type: none;
}

.floating-children > li {
   float: left;
   padding-right: 5px;
}

.floating-children > li.not-floating {
   float: none; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Click on the list to see height.</h1>

<ul class="floating-children">
  <li>You will</li>
  <li>not see</li>
  <li>red background</li>
  <li>of parent &lt;ul&gt;</li>
</ul>

<br />
<br />
<br />

<ul class="floating-children last-child-not-floating">
  <li>You will</li>
  <li><del>not</del> see</li>
  <li>red background</li>
  <li class="not-floating">of parent &lt;ul&gt;</li>
</ul>

＆＃13;

实际上，作为旁注，可能有趣的是，第一个列表上的jQuery点击处理程序只会因为＆＃34;事件冒泡而触发＃34;。由于第一个<ul>的高度为零，实际上无法点击，但点击其子项<li>会向父项发送气泡。

Answer 3

为什么浮动.form-control影响它的兄弟元素？

您已将设置font-size: 20em应用于选择器.inline-form >*。在CSS中，line-height元素继承的父项的block属性继承属性，而当内联元素继承该属性时，containing block继承该属性。这就是line-box元素扩展到父级的完整高度而div元素没有扩展的原因。

在块元素的父元素上设置input将取消继承。

（Demo）

line-height: initial

规范文件摘录

什么是线框？

9.4.2内联格式化上下文



在内联格式化上下文中，框水平布局，   一个接一个，从一个含有的顶部开始   块。在它们之间尊重水平边距，边框和填充   这些盒子。盒子可以以不同的方式垂直对齐：它们   底部或顶部可以对齐，或者其中的文本基线   可以对齐。包含形成框的矩形区域   一行称为.input-group { line-height: initial; }。
  http://www.w3.org/TR/REC-CSS2/visuren.html#line-box

如何计算内联与块元素的行高？

10.8.1领先和半领先

...

在块容器元素上   其内容   由内联级别组成   元素，＆＃39;行高＆＃39;指定线框的最小高度   在元素内。最小高度包括上面的最小高度   基线和它下面的最小深度，就像每个基线一样   行框以零宽度内联框开头   element的字体和行高属性。我们称之为虚构   框a＆＃34; strut。＆＃34; （这个名字的灵感来自TeX。）。

...

在未替换的内联元素上，＆＃39; line-height＆＃39;   指定计算线框时使用的高度   高度。

http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Answer 4

不使用float http://jsfiddle.net/samirkumardas/p3f6xzr6/1/

检查这个小提琴

说明：

'float：left'正在做正确的事情，但是display: table-cell是这种行为的责任。 display: inline-block属性使所有孩子的div处于相同的高度，具体取决于最高的兄弟姐妹div。将其更改为float:left并应用必要的填充，然后移除您的float:left，它会正常运行。

.input-group-addon只需封装您的display: table-cell div并覆盖/取消display: table-cell的全高度行为，并使您的工作取得成功。实际上在你的情况下float:left是没用的，因为你使用{{1}}只是覆盖表格单元格高度属性

漂浮在影响兄弟元素高度的元素上，Wy？

4 个答案:

规范文件摘录

9.4.2内联格式化上下文

10.8.1领先和半领先

说明：