Clearfix 上带有 CSS 问题的响应式布局答案

【问题标题】：Responsive Layout with CSS troubles on ClearfixClearfix 上带有 CSS 问题的响应式布局
【发布时间】：2014-01-31 16:46:35
【问题描述】：

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

基本上，我只希望“第 1 行”和“第 2 行”位于彼此下方而没有空格。我计划在 .line div 中放置很多 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>

【问题讨论】：

标签： css responsive-design clearfix

【解决方案1】：

如果您想避免在 #left 之后使用 :after 清除 .CF，则需要将 overflow:hidden; 添加到 .CF。

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

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

【讨论】：

干杯伙伴。非常感谢您的意见。