左右样式

[ynchuan]

页面开发中最主要的是进行页面布局，布局分为区块上下和左右布局；其中因为行级标签的存在，所以上下布局十分简单；复杂之处在于实现区块左右放置的方式很多，所以本文主要介绍我们常见的左右布局方式。

页面布局实现包含html开发和css编写，二者相辅相成，html是css开发先导，html合理性决定css布局复杂度。

1. table

table标签能够实现左右布局，table布局也是页面布局中使用的最早的布局方式，但是由于存在性能和灵活性问题，已被逐渐放弃，转而在采用div布局。

• table，display:table；块级标签，但是具有包裹性
• tr，display:table-row，表示一行
• td，display:table-cell，表示一列

2. inline-block

• display:inline-block，介于行级元素(display:inline)和块级元素(display：block)之间的属性，
• 可以像行级元素一样水平布局，也可以像块级元素设置宽高属性，所以可以进行左右布局。
• 因为存在空白点问题，所以一般不用于大区块布局，常用于与行内元素构成的内容同行
• 不支持ie6、7浏览器，请注意，但是可以使用inline进行hack处理。

3. float

• 由于具有先左右后上线排布特性，所以成为常见实现左右布局方式
• 本意为脱离文档流，实现文字环绕效果
• 属性值包括none/left/right；left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置

具有特性：

• 包裹性：可以按照区域块中子元素的实际宽度进行包裹；
• 破坏性：由于脱离文档流，float区域块不会被父级区域块包裹，造成高度塌陷，引起下文元素布局异常，引入常见清除浮动问题；

4. flexbox

弹性盒子主要用于移动前端开发，属性不支持ie6、7、8，支持chrome，firefox，不适合面向互联网用户pc网页布局。

• display:flex
• flex: 0 1 auto
• 通过容器和项目，完成通用和个性管理

5. float+margin实现左右布局

float能够使得元素向左或者向右靠边布局，在同级元素中设置正常流区域与浮动块并列，浮动块会在正常流同级区域的边界处，并影响该正常流水平方向布局，在正常流区域块的盒子设置margin等于浮动块的宽度可以清除影响。

6. (float+overflow)实现左右布局

float对元素水平方向的影响，除采用margin进行影响的清除，依据块级格式上下文原理，还可以在受影响的元素上添加overflow：hidden来清除浮动对该区域块带来的影响。

7. position:absolute左右布局

绝对定位，通过对支点元素进行相对偏移实现左右布局

• 支点元素：上级非static元素
• 多绝对定位元素产生覆盖时可通过z-index控制层级，层级非越大越好