css - 两列布局的 float 负边距

Question

我看到两列布局如下，但我不明白为什么会这样。那么 .col-sub 到底做了什么？如果我删除 .col-sub 中的 margin-left:-100%，Sub Content 将会下降。如果我删除其中的 float: left，子内容将无法显示。 margin-left 和 float 在这里做什么？

演示也可以在这里找到:http://jsfiddle.net/yougen/ATNh9/

HTML:

<div class="wrapper">
        <div class="col-main">Main Content</div>
        <div class="col-sub">Sub Content</div>
</div>

CSS:

       * {
            padding:0;
            margin: 0;
        }

       .wrapper {
           margin: 0px auto;
           width: 960px;
           text-align: center;
           line-height: 580px;
       }

       .col-main {
           width:100%;
           height:580px;
           float: left;
           background-color: #f16529;
           border: solid 1px #000;
       }

       .col-sub {
           float: left;
           margin-left: -100%;/** -960px **/
           width: 350px;
           height: 580px;
           background-color: #f0dddd;
       }

Answer 1

使用浏览器的开发者工具，调整子内容的 margin-left 值——从 -100% 开始慢慢减少(或者增加？)到 0%，你会看到它在橙色主要内容上移动，然后在它下面结束。

它下面是它通常去的地方(没有负边距)，因为它向左浮动，但它在 DOM 中的位置在主要内容之后。如果有任何空间，它会紧挨着同样向左浮动的主要内容——但没有，因为主要内容是 100% 宽的。

通过引入负边距，“创建”了空间。负边距在子内容之前“覆盖”元素的右边缘，使整个内容看起来好像右边缘更靠左。当右边距达到 -100% 时，从左侧子内容的 Angular 来看，就好像整个主要元素“不存在”一样 - 所以它很高兴地占据了它的位置 above 包装元素左侧的主要内容。