float布局

1.如何使用float布局

步骤：

• 子元素上加float: left/right;和width
• 父元素上添加.clearfix

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

注：*{padding: 0;margin: 0;box-sizing: border-box;}，使用float布局前添加css reset。

2.布局技巧&解决bug

1.float布局小技巧：

• 最后一个元素一般不写width（不写死），或者使用max-width: 500px;
• 不需要做响应式

注：float多用于IE浏览器，但手机上IE并不普及，因此页面不需要做响应式，多用于IE pc端定长布局。

2.float布局IE bug

问题：IE 6/7存在双倍margin的bug（块元素+浮动试出现）

解决方法：

• 正常的margin描述后添加_margin: 减半;

  margin-left: 10px;  /*正常浏览器 10px的外边距*/
  _margin-left: 5px;  /*IE6/7 减半margin,会自动双倍*/

• 添加display: inline-block;（作用于需要margin的元素）

  margin-left: 10px;
  display: inline-block;

3.float实践

1.页面实践

两栏布局：JS Bin - Collaborative JavaScript Debugging，（顶部条）

三栏布局：JS Bin - Collaborative JavaScript Debugging，（内容区）

四栏布局：JS Bin - Collaborative JavaScript Debugging，（导航）

平均布局：JS Bin - Collaborative JavaScript Debugging，（产品展示区）

效果图：

 2.实践小技巧

 1.去除图片下方多余部分，vertical-align:  top/middle;

2.margin居中

margin: 0 auto;    /*上下0，左右居中，但是可能会覆盖别处的上下margin*/

margin-right: auto;  /*推荐使用这种写法*/
margin-left: auto;

3.存在宽高计算时可以使用outline，outline和border效果相似，但是不占像素。