浮動和保證金崩潰

因此，我很難理解浮動可能導致保證金崩潰的情況以及如何影響浮動的位置。我已經包含了一個頁面，它似乎在同一頁面顯示兩種不同的行爲。浮動和保證金崩潰

紅色浮動物似乎位於通過它摺疊的邊緣之前，而下方的藍色浮動物似乎已經通過它們的邊緣摺疊，然後在這些邊緣摺疊之後定位。

任何幫助將不勝感激。

乾杯，本

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Inheritance Tests</title> 
     <style> 
     * { 
      margin: 0px ; 
      padding: 0px ; 

      font-family: courier ; 
      font-size: small ; 
     } 

     .test4 {width: 200px; height: 100px; border-style: solid; border-width: 1px;} 
     .test5 {border: 1px solid red; width: 200px; height: 50px; float: left; } 

      .floatedRect { 
       width: 50px ; 
       height: 50px ; 
       float: left ; 
       background-color: #9cf ; 
      } 

      .text { 
       margin: 10px ; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="test4"> 
      Normal Flow 
     </div> 

     <div class="test5"> 
      Floated 
     </div> 

     <div style="margin-top: 100px"> 
      Has a top margin 
     </div> 

     <div style="clear: both"> 
      <div class="floatedRect"></div> 
      <div class="text">some text</div> 
      <div class="floatedRect"></div> 
      <div class="text">some text</div> 
      <div class="floatedRect"></div> 
      <div class="text">some text</div> 
     </div> 
    </body> 
</html>

來源

2009-11-10 Ben

這很難理解你在問什麼。有沒有你想要解決的特定問題？你能描述一下你在這個例子中會看到什麼嗎？ – jessegavin 2009-11-10 01:59:57

我不知道我完全理解這個問題，但我會在它採取了刺：

我不相信有時間浮動將導致保證金崩潰。我查看了你的代碼，並且我沒有看到css中設置的任何頁邊距，當我在瀏覽器中查看時（我正在使用Safari），這些邊距被「摺疊」。

這裏是我的想法：

在您的例子的第一部分，你有浮動的div之前的正常流動股利。浮動的div只會被渲染到正常的流量區之下。

在你的例子的第二部分，你有正常的流程div上方的floatedRect div。那是當你看到文字向右移動時。這不會影響文本div的邊距或摺疊邊距。它只是允許文本浮動在浮動的div div周圍。我已經改變了你的代碼來說明：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Inheritance Tests</title> 
    <style> 
    * { 
     margin: 0px ; 
     padding: 0px ; 

     font-family: courier ; 
     font-size: small ; 
    } 

    .test4 {width: 400px; height: 100px; border-style: solid; border-width: 1px;} 
    .test5 {border: 1px solid red; width: 200px; height: 50px; float: left; margin:10px; } 

     .floatedRect { 
      width: 50px ; 
      height: 50px ; 
      float: left ; 
      background-color: #9cf ; 
     } 

     .text { 
      margin: 10px; border:1px solid red; position:relative; z-index:1; 
     } 
    </style> 
</head> 
<body> 


    <div class="test5"> 
      Floated 
    </div> 

    <div class="test4"> 
      Normal Flow 
    </div> 

    <div style="margin-top: 100px"> 
     Has a top margin 
    </div> 

    <div style="clear: both"> 
     <div class="floatedRect"></div> 
     <div class="text">some text</div> 
     <div class="floatedRect"></div> 
     <div class="text">some text</div> 
     <div class="floatedRect"></div> 
     <div class="text">some text</div> 
    </div> 
</body>

注意，文本的div有一個10px的利潤率依然，但文本已被推到由floatedRect的div的權利。

希望有所幫助。

來源

2009-11-10 03:46:51