1、新建html文件。
2、创建两个div，并赋予id。
3、为两个div设置宽高和背景，并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项：
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
左浮动即float:left，使布局元素靠左浮动。右浮动即float:right，使布局元素靠右浮动。在网页布局中结合这两种布局方式可以设计出千变万化的布局形式！只要发散你的思维，开拓你的想象相信定能设计出好的作品！祝你成功！你犯了一个细节错误。我刚查看了你的css，为什么fr有效，fl却无效。因为你fl上面的样式属性写错了.clearfix(zoom:1)应该是.clearfix{zoom:1}。是{}大括号，所以造成了fl无效。
