CSS 布局

国内浏览器分辨率(cnzz)

• 固定宽度布局（实现起来简单、可控）
  淘宝

• 弹性布局（fluid）布局
  永远保证你能看见全部的内容

• 响应式布局 -- 多终端

• 单列布局、两列布局、三列布局

image.png

image.png

对每一种布局方式要知道它的优缺点。

以上是不用浮动方式实现的两列布局（position:absolute + margi-left）缺点是：aside是绝对定位，脱离了文档流，如果main的高度比aside要小，那么main之后的div（比如footer）有部分内容可能会被aside遮挡住。解决方式：给main一个最小高度，aside一个最大高度。

接下来利用浮动 ( float:left * 2) 的方式实现两列布局 ( 如果不清除浮动，浮动元素会让它的父元素高度为0）

  

      

      

  
  footer

布局缺点：宽度必须要很精确，有时候加个1px的border,都有可能导致main 直接换行。

三列布局

image.png

• 简单的方式

• 双飞翼 （和上面一样的效果，不同的方式）

只有内联元素才会被左浮的元素影响?