响应式布局，在 Clearfix 上出现 CSS 问题

Question

我正在创建我的第一个真正的响应式布局，但在使用css和clearfix时遇到了困难。我做了一个JS小提琴（http://jsfiddle.net/brandrally/GFXP9/1/）来演示我创建的代码的问题。

基本上，我只想让"1号线"和"2号线"在没有空格的情况下相互重叠。我计划在 .linediv 中放置相当多的div，因此我认为我需要清除它们。

.CSS

div#content {max-width: 400px; min-width: 300px; margin:0 auto; }
div#left {width: 100px; background:#CCC;  float: left; }
.line {border-bottom: 1px solid #000;}
div#right {background:#F63; margin-left: 100px;}
/* Clearfix */
.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.CF { display:inline-block; }
/* IE mac */
.CF { display:block; }

.HTML

<div id="content" class="CF">
<div id="left" class="CF">
    Left Content <br/>
    Displayed<br/>
    Demo<br/>
    Problem.
</div>
<div id="right" class="CF">
    <div class="CF line"> Line 1</div>
    <div class="CF line"> Line 2</div>
    <div class="CF line"> Line 3</div>
</div>
</div>

Answer 1

如果你想避免从#left中清除.CF，你需要在.CF中添加overflow:hidden;。

.CF不需要 clearfix 伪，因为overflow可以完成这项工作。

http://jsfiddle.net/GFXP9/5/