两栏布局，两个经典bug，触发bfc效果

两栏布局的方法、两个经典bug的解决方法、触发bfc效果的方法。

两栏布局：

两栏布局是指让两个div结构并列到一排，但是div结构是块级元素，一般情况下不能实现。所以思路就是让它们一个固定，一个自适应，因为通过绝对定位可以实现自适应。

具体方法如下：

html
<div class="demo1"></div>
<div class="demo2"></div>

css
*{
    margin:0;
    padding:0;
}
.demo1{
    position:absolute;
    right:0;
    width:100px;
    height:100px;
    background-color:red;
}
.demo2{
    height:100px;
    background-color:blue;
    margin-right:100px;
}

效果如图

margin塌陷、margin合并：

margin塌陷是指当具有父子级关系的两个盒子放在一起时如图

这时你想要让绿色方块挪到黑色盒子右下角，加上margin-top：50px；是办不到的，因为存在margin塌陷，但是你要加上margin-top：150px；就可以，就好似黑色盒子的屋顶塌了一样，解决办法是啥呢？

这时需要触发bfc效果，触发了bfc效果之后，margin塌陷就可以解决了。那么触发bfc效果的方法有哪些？在父级元素下加上以下属性：[

• position : absolute;
• display : inline-block;
• float:right/left;
• overflow : hidden;

]

在父级标签下加上以上属性，就可以实现以上功能了。

margin合并是指，当两个方块处于上下分层时，上面的方块margin-bottom：100px；，使下面的方块margin-top：100px；这时下面方块的margin-top的值失效了，因为它和上面的margin-bottom的值合并了，所以就要解决合并问题，让它们中间可以隔开200px，又要用到触发bfc效果了。

注意：

使用触发bfc效果的方法时需要注意：要根据特定要求进行使用，比如需要消除溢出部分时，就可以使用overflow：hidden；一举多得。