css - 渲染定位的 div 和 float 的 div

Question

CSS:::::

.box {
    float: left;
    width: 40%;
}
button {
    position: absolute; 
}

html 主体:::

<div>
        <div class="box" id="leftBox">
            <!--contains a header and jquery tree -->
        </div>
        <div class="box" id="rightBox">
          <!--contains a header and jquery tree-->
        </div>
    </div>
    <div>
        <button style="display:block;"> Run Test </button>
    </div>

被渲染为,,,

为什么定位按钮位于 float 对象之上？按钮的 div 元素不应该将其移动到下一行吗？如何将按钮移动到下一行而不是右边？

Answer 1

我为你做了这个:

http://jsfiddle.net/lharby/qft2bLdx/

这有点hacky。

我从按钮中删除了 position:absolute 并添加了

 clear:both;

更好的选择是将 clearfix 类添加到包含两个框类元素的包装器中。

引用:http://css-tricks.com/snippets/css/clear-fix/

所以最好的结果是:

HTML

<div class="clearfix">
    <div class="box" id="leftBox">
        <!--contains a header and jquery tree -->
        Start Tests
    </div>
    <div class="box" id="rightBox">
      <!--contains a header and jquery tree-->
        Start Tests
    </div>
</div>
<div>
    <button> Run Test </button>
</div>

添加 CSS

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */