Question

我们的想法就是拥有这样的观点：

Hello                           World 
I should be below the hello world line.

html / css片段：

<div>
    <div style="display:block;">
        <span style="float: left;">
           <label style="width:30%;">Hello</label>
        </span>
        <span style="float: right;">
             <label style="width:70%;text-align:right;">World</label>
        </span>        
    </div>
   <div>
            <label>I should be below the Hello World line.</label>
   </div>
</div>

这是小提琴： https://jsfiddle.net/pga06pss/

最后一个div包含：'我应该低于你好世界线' - 实际上在你好之后立即在最后一行结束，我希望它出现在那之下。

Answer 1

如果元素可以水平放置在另一个旁边的空间中浮动的元素，它会。除非你明确表示元素与float相同的方向。然后元素将移动低于浮动元素。

https://css-tricks.com/almanac/properties/c/clear/

＆＃13;

<div>
  <div style="display:block">
    <span style="float: left;">
               <label style="width:30%;">Hello</label>
            </span>
    <span style="float: right;">
                 <label style="width:70%;text-align:right;">World</label>
            </span> 
  </div>
  <div style="clear:both">
    Why am I not on a separate line
  </div>
</div>

＆＃13;

Answer 2

父母正在被其漂浮的孩子瘫倒。解决这个问题的最佳方法是使用clearfix：

＆＃13;

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

＆＃13;

    <div>
        <div style="display:block;" class="cf">
            <span style="float: left;">
               <label style="width:30%;">Hello</label>
            </span>
            <span style="float: right;">
                 <label style="width:70%;text-align:right;">World</label>
            </span>        
        </div>
       <div>
                Why am I not on a separate line
       </div>
    </div>

＆＃13;

您现在已经注意到父母已经恢复了身高，而在您的示例中，它完全崩溃了（0px身高）！

Clearfix来源：http://nicolasgallagher.com/micro-clearfix-hack/

有关浮动的更多信息：https://css-tricks.com/all-about-floats/

Div错误地浮动在另一个div的顶部

2 个答案: