6.两栏布局、两个经典BUG、BFC

两栏布局

首先定位过去
然后自适应的让出去margin

.right{
    position: absolute;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: #fcc;
}


.left{
    margin-right: 100px;
    height: 100px;
    background-color: #123;
} 

两个BUG margin问题

margin塌陷
垂直方向父子margin会黏合到一起，取最大的
1.老方法
给父亲加一个border:1px solid black; 加个顶
2.BFC解决（改变盒子里语法规则）
BFC block format context 块级格式化上下文

margin合并
两个兄弟元素垂直margin是合并的
可在外边嵌套一个 overflow出发BFC解决
更好
不解决，计算使只用一个margin即可

如何触发一个盒子的BFC
position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;
选择使用，哪个不影响用哪个

float

float
1.使元素站队
float:left/right

1.浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素
清除浮动使用clear:both