一.两栏布局

1. 原理：
   定位元素定位到那个位置上去，
   自适应元素将定位的位置让出来。
2. eg:

<div class="right"></div>
<div class="left"></div>

.right{
    position:absolute;
    right:0;
    width:100px;
    height:100px;
    background-color:red;
}
.left{
    margin-right:100px;
    height:100px;
    background-color:black;
}

二.margin塌陷

1. 现象：父子嵌套的元素，垂直方向的margin会粘合到一起，选最大的值。
   eg：就像父级没有了顶棚一样

content与wrapper距离浏览器顶端150px

样式

2.解决方法
（1）给上例中父级元素加个上边界
eg：border-top:1px solid red;
（2）*bfc---block format context---块级格式化上下文
即，改变渲染规则
那么，如何触发bfc原则？

• position:absolute;
• display:inline-block;
• float:left/right;
• overflow:hidden;
  给上例中父级元素添加这些 属性，触发了bfc原则，改变了父级盒子的渲染规则。

三.margin合并

1. 现象：兄弟元素，垂直方向margin会合并到一起，选最大的值
   eg:demo1,demo2元素

demo1与demo2上下距离为200px

2. 解决方法---bfc
   （1）修改html，包裹兄弟元素，从而改变渲染规则，触发bfc

   
   
   overflow:hidden
   
   

   （2）但不建议随意修改html框架改结构，直接修改两兄弟间的数值是最好的