一.两栏布局
- 原理：
定位元素定位到那个位置上去，
自适应元素将定位的位置让出来。 - 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塌陷
- 现象：父子嵌套的元素，垂直方向的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合并
- 现象：兄弟元素，垂直方向margin会合并到一起，选最大的值
eg:demo1,demo2元素
demo1与demo2上下距离为200px
-
解决方法---bfc
（1）修改html，包裹兄弟元素，从而改变渲染规则，触发bfc
overflow:hidden
（2）但不建议随意修改html框架改结构，直接修改两兄弟间的数值是最好的
