聊聊前端布局

[ihtml5]

聊聊前端布局

作为一名前端工程师，页面布局能力是最基本能力。最近公司招聘前端，自己作为面试官，出了一些题，其中一道就是布局的题目：实现一个左侧定宽，右侧充满剩余屏幕的布局。

布局涉及的点包括以下几个方面：

1. position属性理解运用
2. flat属性理解运用
3. 盒模型
4. BFC/IFC/GFC/CFC
5. 块级元素和内联元素

position

position有4个属性，分别为static,relative,absolute,fixed。

属性	相对谁定位	使用场景	注意事项
static	默认值	无	没有top,left,right,bottom,z-index属性
relative	相对于其默认位置(static)	微调元素的位置	没有脱离文档流
absolute	相对于离它最近的已定位元素(如fixed,relative,absolute)	弹出框	脱离文档流
fixed	相对于浏览器窗口定位	固定导航菜单，滚动到头部	脱离文档流

脱离文档流指的是元素的布局不再影响文档中的其他元素。

float

属性	规则	使用场景	注意事项
none	无	无	无
left	向左浮动，直到遇到带框的元素	左侧定宽布局	脱离文档流
right	向右浮动，直到遇到带框的元素	右侧定宽布局	脱离文档流

BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

使用那些属性会形成BFC:

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

BFC布局规则：

具体布局规则有以下几条：

1. BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
2. BFC不会重叠浮动元素
3. BFC会包含浮动元素
4. 计算BFC的高度时，浮动元素也参与计算

低版本浏览器比如ie6,7如何触发BFC

1. postion：absolute
2. float: left|right
3. display: inline-block
4. width:除"auto"外的任意值
5. height:除"auto"外的任意值 6.zoom:除"normal"外的任意值

当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。

清除浮动

/*兼容ie6,7的清除浮动方法*/
.clearfix {
    *zoom: 1;
}

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