浮动和保证金崩溃

因此，我很难理解浮动可能导致保证金崩溃的情况以及如何影响浮动的位置。我已经包含了一个页面，它似乎在同一页面显示两种不同的行为。浮动和保证金崩溃

红色浮动物似乎位于通过它折叠的边缘之前，而下方的蓝色浮动物似乎已经通过它们的边缘折叠，然后在这些边缘折叠之后定位。

任何帮助将不胜感激。

干杯，本

<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