布局是什么

布局就是将页面分成一块一块的

布局分类

• 固定宽度布局，一般宽度为960/1000/1024px（如：PC端的淘宝页面）；

• 不固定宽度布局，主要靠文档流的原理来布局（主要是应用于手机页面）；

  注：文档流本来就是自适应的，不需要加额外的样式（如：加了宽度）；

• 响应式布局（混合布局）：意思就是PC上固定宽度，手机上不固定宽度；

布局的思路

• 从大到小： 先定下大局，然后再完善每个部分的小布局；（老手）
• 从小到大： 先完成小布局，然后组合成大布局；（推荐新人）

如何选择布局

Float布局

Float布局的步骤

1）子元素加上float: left 和 width；

2）在父元素上加 .clearfix；

你的问题：

具体解法见下图：

Float布局的要点

1. 对于最后一个元素就不设width;

   

   

2. 如果用了float布局，就不需要去做响应式，因为手机上没有IE，而float布局是专门为IE准备的；

3. IE6/7存在双倍margin 的bug：意思是你明明写的margin-left:10px;，但是在IE6/7上它会显示20px;

   解决办法有两种：

   • 将错就错，针对IE6/7把margin减半

     

   • 神来一笔，再加一个display：inline-block

     

Float布局的实践

1. 用float做四栏布局（如导航）

2. 用float做两栏布局(如顶部条)

   

3. 用float做三栏布局（如内容区）

   

4. 用float做平均布局（如产品展示区）