CSS两栏布局，margin塌陷，margin合并问题

两栏布局

先写right，带定位的。

.right{

    position: absolute;

    right: 0;

    width: 100px;

    height: 100px;

    background-color: #fcc;

    opacity: 0.5;

}

.left{

    margin-right: 100px;

    height:100px;\

    background-color: #123;

}

经典俩bug :margin塌陷 在标准文档流中，

块级标签之间竖直方向的margin会以大的为准 

例：一.

.wrapper{

    margin-left:100px;

    margin-top: 100px;

    width: 100px;

    height: 100px;

    background-color: black;

}

.content{

    margin-left: 50px;

    margin-top: 50px;

    width: 50px;

    height: 50px;

    background-color: green;

}

解决办法 bfc block format context

通过一些手段，改变盒子的渲染规则， 

如果触发一个盒子的bfc:

1.position:absolute;

2.display:inline-block;

3.float:left/right;

4.overflow:hidden;

margin合并问题：块级元素的上外边距或下外边距有时会合并为一个外边距

合并原则：正正取最大，负负取最负，正负就相加

例：二.

.demo1{

    background-color: red;

    margin-bottom: 100px;

}

.demo2{

    background-color: green;

    margin-top: 100px;

}

不解决，通过计算来增大对应的像素，达到相同的目的。

float:;浮动

例:

.wrapper{

    width: 300px;

    height: 300px;

    border:1px solid black;

}

.content{

    float: left;

    margin-left: 10px;

    margin-bottom: 10px;

    background-color: black;

    width: 100px;

    height: 100px;

}

浮动元素产生了浮动流

所有产生了浮动流的元素，块级元素看不到他们

产生了bfc的元素和文本属性的元素（inline）以及文本都能看到浮动元素

clear:both;清除浮动流，使得父级元素能包住浮动元素

span::before{

    content: ;

}

span::after{

    content: ;

}

伪元素是行级元素，想添加宽高，必须改为块级元素（display： inline-color;)

利用伪元素来清除浮动

.wrapper::after{

    content: "";

    clear: both;

    display: block;

}

浮动可以实现文字环绕图片的效果