要开发网页，必须要搞懂这三种div+css布局技术！（1）左右两列布局；（2）1行3列；（3）1行多列或多行多列布局；只要你掌握了这三种布局方式，那搭建一个完整的网页框架肯定是一点问题都没有。
实现效果：
详细代码：
代码包含详细注释，一看就会。直接复制代码浏览器打开查看效果即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端必会的3中CSS布局技术</title>
<!--type="text/css"样式为css
width: 1000px;div的宽度，一般的宽度是1280px
height: 1500px;高度会自动往下伸
浏览器默认<body>有间距8px,设置为0px
margin: 30px auto 0px; 上外边距30px，左右边距自动 下外边距为0pxs
-->
<style type="text/css">
/*去除body的外边距*/
body, ul {
margin: 0px;
padding: 0px;
}
/*去除ul的点*/
ul {
list-style: none;
}
/*最大的盒子的样式*/
.container {
width: 1000px;
/*height: 1500px;*/
/*border: 2px solid red;*/
margin: 30px auto 0px;
}
/*一行两列的最大盒子样式*/
.column2 {
/*border: 2px solid black;*/
}
/*float: left; 左浮动，如果单独加左浮动，下面的黄色就会自动贴上来，
被红色盖住，如果想测试，将column2-2的高度改成400px
但是column2-1和column2-2都被设置float浮动了，column2就会塌陷了。
如何解决呢？ 清楚浮动
*/
.column2-1 {
width: 700px;
height: 300px;
background-color: red;
float: left;
}
.column2-2 {
width: 280px;
height: 300px;
background-color: yellow;
float: right;
}
/*清除浮动
clear: left; 只能清除div左浮动（即 float: left）问题，
不能清除右浮动问题，你可以将column2-1的高度改成200px,就会发现问题
clear: both;解决左右浮动问题
*/
.clear {
/*clear: left;*/
clear: both;
}
/*一行散列，最大的盒子*/
.column3 {
/*border: 2px solid red;*/
margin-top: 20px;
}
/*3个盒子布局在一行的第一种方式：分别加上左浮动 float: left;
第二种方式：第一第二左浮动，第三右浮动
*/
.column3-1 {
width: 200px;
height: 300px;
background-color: aqua;
float: left;
}
.column3-2 {
width: 400px;
height: 300px;
background-color: salmon;
float: left;
margin-left: 20px;
}
.column3-3 {
width: 360px;
height: 300px;
background-color: aquamarine;
float: right;
}
/*清除浮动的第二种方式
.clearfix:after就相当于在div后面创建了一个伪元素
content: "111"表示伪元素中的内容
display: block;设置成块级元素才能
*/
.clearfix:after {
/*content: "111";*/
content: "";
display: block;
background-color: brown;
clear: both;
}
/*多行多列
最大的盒子
*/
.column-n {
/*border: 2px solid purple;*/
margin-top: 20px;
}
.column-n ul {
/*background-color: sandybrown;*/
}
.column-n li {
width: 190px;
height: 200px;
/*border: 1px solid red;*/
float: left;
margin: 5px;
background-color: aqua;
}
</style>
</head>
<body>
<!--class="containner"容器，其中的样式会使用.containner中的-->
<!--class="container"最大的盒子-->
<div class="container">
<!--一行两列，一个大的盒子装两个小的盒子-->
<div class="column2">
<div class="column2-1">
</div>
<div class="column2-2">
</div>
<!--清除column2浮动问题，清除浮动一般写在最后面-->
<div class="clear"></div>
</div>
<!--一行三列
第二种清除column浮动问题clearfix 清除浮动
.clearfix:after就相当于在div后面创建了一个伪元素
-->
<div class="column3 clearfix">
<div class="column3-1">
</div>
<div class="column3-2">
</div>
<div class="column3-3">
</div>
</div>
<!--多行多列-->
<div class="column-n">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
