Floating Tableless Layout

Question

任何人都可以告诉我如何执行此浮动和清除布局？我一直想2天彻底失败

Answer 1

应该很简单，这是一个基本的2列布局一个头。

像这样的东西应该很好地工作：

<div id="container"> 
<div id="header">1</div> 
<div id="column1"> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 
<div id="column2"> 
    <div>5</div> 
    <div>6</div> 
</div> 
</div> 

和一些基本的CSS

#column1, #column2{ 
width:45%; 
float:left; 
} 

我已经在这里放一个简单的例子：http://jsfiddle.net/9DfRg/

Answer 2

当然也有许多解决方案。其中一个可能是以下几点：

HTML

<div id="wrapper"> 
    <div id="one">One</div> 
    <div id="two">Two</div> 
    <div id="three">Three</div> 
    <div id="four">Four</div> 
    <div id="five">Five</div> 
    <div id="six">Six</div> 
</div> 

CSS

#wrapper { 
    width:960px; 
} 
#one { 
    width:100%; 
    height:100px; 
    background:#0C9; 
} 
#two, #three, #four, #five, #six { 
    width:480px; 
} 
#two, #four, #six { 
    float:left; 
    height:100px; 
} 
#three, #five { 
    float:right; 
} 
#three { 
    height:200px; 
} 
#five { 
    height:150px; 
} 
#two { 
    background:#06F; 
} 
#three { 
    background:#093; 
} 
#four { 
    background:#699; 
} 
#five { 
    background:#F06; 
} 
#six { 
    background:#666; 
} 

活生生的例子：http://jsbin.com/iquyu5