CSS代码：
css代码
.main{width:800px;/* 总的宽度 */
background:red;
}
.main .col1{
float:left;/* 这个是关键的地方 让col1往左浮动，这样它的后面（右边）就可以放置别的元素*//*（别的元素：可以是div，图片，文字等） */
width:300px;height:300px;
background:#eee;border:1px solid #ccc;
}
.main .col2{
float:left;/* 这个是关键的地方 让col2也往左浮动，紧跟在col1的后面 */
margin-left:5px;/* 让col2和col1之间有些间隔 */
width:490px;height:300px;/* 给一个尺寸 可以随意*/
background:#ddd;
border:1px solid #ccc;
}
.clear-float{clear:both}/* 清除col1和col2的float,否则main的高度会出错 *//*没有包住它里面的有float的元素。 */
HTML结构：
main
col1
col2
clear-float
效果：
立即学习“前端免费学习笔记（深入）”；
Code
main 我是包在外面的div
col1 我是第一列
col2 我是第二列
clear-float;我用来清除浮动（清除float）
