css定位，两栏布局，两个经典bug,BFC

1.三种定位方式

（1）绝对定位

基本使用

	position: absolute;
	top: 10px;
	left: 10px;

要点：

• 绝对定位是脱离文档流的，因此可能会遮挡其他页面上的元素(设置z-index属性来设置层叠级别)
• 一般left/right和top/bottom两对，每一对只设置一个值以防冲突
• 绝对定位的元素的包含块是距离它最近的定位祖先，如果没有定位祖先则相对于html标签定位
• left是当前文档元素的左边界距它的包含块的左边界的距离
• top是当前文档元素的上边界距它的包含块的上边界的距离
  
  

定位祖先的定义：

• 含有position属性
• position属性的值不是static

注意：无position属性 === position的值是static

（2）相对定位

基本使用

	position: absolute;
	top: 10px;
	left: 10px;

要点

• 相对定位未脱离文档流，相对于其本来的位置进行定位
• 相对定位也会影响其他元素

（3）固定定位

基本使用

	position: fixed;
	left: 10px;
	top: 10px;

要点

• 脱离文档流
• 固定在用户视角内

2.两栏布局

代码：

效果：

注意点：

• 首先要设置第一个div脱离文档流，这样第二个div才会上去
• 然后再文档流中的那个div要设置margin-left为第一个div的width，这样才不会遮挡

（3）两个经典bug：margin塌陷和合并

发生bug的几种情况

• 兄弟节点
  

• 父子节点

• 其中一个空元素，没有边框和填充

解决办法

• 兄弟元素
  对于此类，只要将外边距设置为想要的值即可 ，不需要特地去解决

• 父子元素
  BFC
  
  
  
  
  
  

（4）BFC

Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发BFC容器的条件

• body元素
• 浮动元素：float：除none以为的值
• 绝对定位元素：position：absolute/fixed
• display：inline-block/table-cells/flex
• overflow：除了visible以外的值（hidden/auto/scroll)