在Clearfix上使用CSS問題的響應式佈局

Question

我創建了我的第一個真正的響應式佈局，並遇到了與css & clearfix有關的困難。我做了一個JS小提琴（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> 

Answer 1

如果你想避免清算 .CF與

：從#left後，你需要添加overflow:hidden;到.CF。

.CF由於overflow可以完成這項工作，因此不需要使用clearfix僞指令。

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