浮動和保證金

我需要知道爲什麼下面的代碼：浮動和保證金

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      * 
      { 
       margin:0px; 
       padding:0px; 
      } 
      #right 
      { 
       float:right; 
      } 
      #content 
      { 
       margin-top:20px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="right">a</div> 
     <div id="content">b</div> 
    </body> 
</html>

適用的20像素距頂部也在#right股利。

來源

2010-09-22 user232028

它正常工作時，你：

#content { 
    margin-top: 20px; 
    clear: right; 
}

來源

2010-09-22 14:25:51 petsagouris

我知道如何解決這個問題，但我對這個原因感興趣。謝謝。 – user232028 2010-09-22 14:37:16

原因是因爲您沒有清除浮動元素。 – Ross 2010-09-22 14:47:07

它不嚴格。（保證金不適用於#right）浮動將元素從文檔流中取出。

添加明確：權利＃內容

和浮動元素〜應該〜具有寬度。

來源

2010-09-22 14:26:30 Ross

謝謝，我知道浮動將元素從流中取出。因此，我的浮動元素應該在右上角，沒有邊距。 – user232028 2010-09-22 14:32:31

啊，爲什麼而不是如何。坦率地說，我不能給你一個簡潔的定義，我敢肯定別人可以。浮動元素沒有邊距。它在視覺上可能會出現，但那是因爲浮動元素出現在非浮動內容已顯示或直到浮動清除。至少這是我的理解。你會看到#content的邊距，然後在輸出#content，#right後，缺少一個更好的單詞。 – Ross 2010-09-22 14:50:06

爲什麼更多地關於塊與內嵌塊與內聯工作的方式。 – jcolebrand 2010-09-22 15:59:27

缺少兩件事：1）明確：正確; #content內。 2）需要指定寬度，以便您可以應用清除：沒有div的堆疊。

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      * 
      { 
       margin:0px; 
       padding:0px; 
      } 
      #right 
      { 
       float:right; 
       width:24%; 
       border:1px solid red; 
      } 
      #content 
      { 
       margin-top:20px; 
       width:74%; 
       clear: right; 
       border:1px solid aboue; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="right">a</div> 
     <div id="content">b</div> 
     <div style="clear:both;"></div> 
    </body> 
</html>

我已經添加了邊框以便於查看。

來源

2010-09-22 14:40:39

非常感謝。我需要知道爲什麼，在我的版本中，浮動元素具有margin-top，分配給#content。 – user232028 2010-09-22 14:47:36

我想我沒跟着，因爲你的明確地加了一個margin-top：20px to #content – 2010-09-22 14:59:17

〜margin-top不適用於'＃right'元素。他想知道爲什麼'＃right'元素有一個margin-top。原因是因爲'block' vs'inline-block' vs'inline' – jcolebrand 2010-09-22 16:00:31

浮動和保證金

回答

相關問題