股利浮在另一個上面DIV正確

-1

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包含：'我應該低於你好世界線' - 實際上在你好後立即結束在第一線，我希望它出現在下面。

來源

2016-04-04 Jasper

因爲你沒有包含/清除花車 - https://jsfiddle.net/pga06pss/ –

而究竟爲什麼是這個問題倒-voted？ – Jasper

下調原因是「缺乏研究努力」，「不清楚」和「沒用」。猜測，我會假設第一個。這是一個非常常見的問題，可能*已經通過簡單的Google或SO搜索解決了。無論如何，這是我的猜測。 –

如果元素可以水平放置在另一個浮動元素旁邊的空間中，除非您以與浮動方向相同的方向對該元素應用清零。然後該元素將移動到浮動元素下方。

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

<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>

來源

2016-04-04 15:22:48 dimshik

爲什麼這個問題被低估？任何想法？ – Jasper

@Jasper我不知道。但希望我的回答幫助你瞭解浮動是如何工作的:) – dimshik

母公司通過它的浮動孩子被倒塌。打擊這一點，最好的辦法是使用clearfix：

.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; 
 
}

<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>

你現在看到的是，父母已經得到了它的高度回來，而在你的榜樣，它完全坍塌（0像素高度）！

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

彩車上的更多信息：https://css-tricks.com/all-about-floats/

來源

2016-04-04 15:24:34

股利浮在另一個上面DIV正確

回答

相關問題