CSS布局之定位与浮动

布局是元素的摆放模式，把元素以正确的大小摆放在正确的位置上。
关键词：普通流模型、浮动模型、层模型/定位、弹性盒模型。
本节主要介绍浮动和定位，弹性盒子请点这里。

一、元素框显示方式

语法

display: block | inline | inline-block | none | ...;

常见属性值对比

属性值	描述	默认宽度	宽高和边距	显示	元素
block	块级元素	容器宽度	可设置	独占一行	p,h1~h6,div,table,form,ul等
inline	行内元素	内容宽度	宽高和竖向边距设置无效	和其他元素同行	a,span,br,label等
inline-block	行内块元素	内容宽度	可设置	和其他元素同行	video,input,button等
list-item	列表块	同block	同block	同block	无
table	表格块	同block	同block	同block	无
none	不显示	无	设置无效	不显示，也不占空间	无

• 虽然inline元素的padding-top和padding-bottom设置无效，但是会撑大背景。
• display:none与visibility:hidden的区别：后者仅使元素不显示，但仍然占据空间。

inline-block的兼容性问题

• IE7-不支持inline-block，但是会触发layout，因此元素的width、height设置是能生效的，所以也就有了同其它浏览器一致的显示效果。
• 兼容方法一：在同一样式中同时使用inline-block和inline

  div{
    display: inline-block; /* 这里不会触发layout */
    *display: inline; /* IE hack */
    *zoom: 1; /* 触发layout */
  }
  

• 兼容方法二：先后在两个样式中使用inline-block和inline，这是IE的bug

  div{display:inline-block; /*触发layout*/}
  div{*display:inline; /*block也行，此时layout效果不消失*/}
  

去除inline-block和inline元素间的空白

• 如果inline-block或inline元素间有换行、空格和tab，元素间就会产生间距。
• 解决方法一：将元素写在同一行，且中间无空白符（可读性极差）。
• 解决方法二：在父元素上设置font-size:0;，去掉水平方向的空白；然后在子元素上设置vertical-align，去掉垂直方向的空白。旧Chrome限制字体最小为12px，用-webkit-text-size-adjust:none;兼容。
• 解决方法三：将父元素的letter-spacing或word-spacing设为负值，子元素恢复为0。Opera限制letter-spacing最小为1px，Chrome下word-spacing方法可能无效。
• 解决方法四：将元素的margin-left设为负值，具体值要根据浏览器和字号决定。

参考：去除inline-block元素间间距的N种方法

示例

• 块级元素水平居中：

  block-element {margin:0 auto;}
  

• 横向居中导航栏：

  ul {text-align:center;}  /* 使内容居中 */
  li, a {display:inline-block;} /* 设置为行内块元素 */
  

二、定位

定位方式

position: static | relative | absolute | fixed;

• 属性值对比

值	描述	参照物	元素表现
static	无定位（默认）	无	在普通文档流中
relative	相对定位	自身正常位置	在普通文档流中
absolute	绝对定位	第一个定位祖先或根元素	脱离文档流
fixed	固定定位	浏览器视窗	脱离文档流，不随浏览器的滚动条滚动

• 由于static表示无定位，因此以下说“定位”时都不包括static。
• 所有定位都可以提高z-index值；脱离文档流的定位元素，其默认宽度为内容宽度。
• relative定位在偏移后仍然占据原位置的空间，常用于提高元素层级或作为absolute定位的参照物。
• absolute和fixed会忽略元素的float属性，并使元素变为块级元素。

定位位置

• 元素边缘与其参照物边缘的距离：

  top: <len-%> | auto | inherit;
  right: <len-%> | auto | inherit;
  bottom: <len-%> | auto | inherit;
  left: <len-%> | auto | inherit;
  /* <len-%> = <length> | <%> */
  

  • 应与position属性搭配使用，默认值为auto。
  • 如果元素未设置宽高，又同时设置了对面属性值（如top和bottom、left和right），元素的内容区会被撑开。
• 元素在z轴上的堆叠顺序：

  z-index: <num> | auto | inherit;
  

  • 应与position属性搭配使用，默认值为auto。
  • 同一个栈内，值越大，元素层级越高（越靠近人眼）；不同栈内，根据其参照物的z-index值排序。

示例

• 页面遮罩：

  .mask {
    postion: fixed; /* 固定位置，使遮罩不会随着滚动条滚动 */
    z-index: 999; /* 设置一个极大值，使遮罩显示在最上层 */
    top:0; left:0; /* 从浏览器视窗的左上角开始 */
    width:100%; height:100%; /* 宽高充满视窗 */
  }
  

• 三行自适应（固定顶栏+固定底栏+自适应内容区）

  .header {
    position: absolute;
    top:0; left:0; width:100%; height:100px;
  }
  .main {
    position: absolute;
    right:0; left:0; /* 同时设置对面属性值，可撑开内容区 */
    top:100px; bottom:100px; /* 让出header和footer的区域 */
    overflow: auto;
  }
  .footer {
    position: absolute;
    bottom:0; left:0; width:100%; height:100px;
  }
  

三、浮动

浮动位置

float: left | right | none | inherit;

• 默认值为none，即不浮动。
• 浮动元素向指定方向一直移动到容器边缘，默认宽度为内容宽度。
• 浮动元素半脱离文档流——元素脱离但内容还占据空间；同一容器中的浮动元素在同一文档流中。
• 假设一个容器内只有一个子元素；如果容器没有设置高，那么子元素浮动后，容器的高度就会坍塌。
• float会使元素变为块级元素。

清除浮动

clear: both | left | right | none | inherit;

• 默认值为none。
• 应用于浮动元素的后续块级元素。

清除浮动的方法

• 方法一：在浮动元素后面添加一个空白元素

  blank_element {
    clear: both; /* 清除浮动 */
    height:0; overflow:hidden; /* 隐藏元素 */
  }
  

• 方法二：给容器添加一个clearfix类

  /* 利用::after伪元素 */
  .clearfix:after {
    content: ""; /* 在容器最后添加一个伪元素，内容随意 */
    display: block; /* clear属性只能用于块级元素 */
    clear: both; /* 清除浮动 */
    height:0; overflow:hidden; visibility:hidden; /* 隐藏伪元素 */
  }
  /* 兼容低版本IE浏览器 */
  .clearfix {*zoom:1;}
  /* .clearfix {*+height:1%;} 这种兼容也可以 */
  

• 方法三：利用overflow属性

  .clearfix {overflow:auto; _height:1%;}
  /* 这样写也行： */
  .clearfix {overflow:hidden; _zoom:1;}
  

• 方法四：给容器设置高或绝对定位或浮动，并不是真的清除了浮动。