//父元素的相对定位作为子元素绝对定位的参考。父母{显示：相对;背景：#ddd}.l-child{位置：绝对；宽度：100px；background:#bbb}.r-child{margin-left:100px;background:#999}demo展示2.float:left+margin-left触发计算父元素的宽度--技巧写法此方法使用float:left离开流的文档特征。与方法一类似，但脱离文档流的方式不同，父元素的作用也不同。方法一中，父元素需要使用display:relative作为定位参考，给子元素一个定位参考；方法二，父元素使用overflow:hidden清除浮动，避免影响后续元素。.parent{background:#ddd;overflow:hidden;}.l-child{float:left;width:100px;background:#bbb;z-index:10000;}.r-child{margin-left:100px;background:#999;}demo展示3.float:left+BFC触发右侧子元素宽度的计算——技巧写作本方法使用左侧float确定宽度，右侧框的overflow:hidden触发BFC使其不与浮动框区域重叠，并且将重新计算宽度。.parent{background:#ddd;}.l-child{float:left;width:100px;background:#bbb;}.r-child{overflow:hidden;background:#999;}demo展示4.左右浮动，右侧使用负边距——专家级写法这种方法布局比较复杂，而且dom结构也不同于大多数方法。获取难点：父元素清除浮动，防止其他元素受到浮动的影响；A元素的宽度为100%没有变化，经过margin-left:-100px后，文档流被认为是border为界，A缩小100px，A向右浮动，即有左边是100px的空白，用来填充文档流空间；子元素A1被认为是父元素大小没有改变。margin-left:100px之后，恰好等于父元素在外面腾出的文档流空间；B元素向左浮动，后面就是dom节点，刚好占据覆盖了A腾出的100px空间。右自适应1右adaptive2Rightadaptive3