BFC和浮动元素

bfc

block format context
如何触发一个盒子的bfc
用以下方式：
position：absolute；
display：inline-block；
float：left/right；
overflow：hidden；

两栏布局

.right{    
position: absolute;    
right: 0;    
width: 100px;    
height: 100px;   
 background-color: aqua;
}.
left{    
height: 100px;    
margin-right: 100px;    
background-color: rgb(111, 7, 180);
} 

margin塌陷

加入bfc解决

.wrapper{    
margin-left: 100px;     
margin-top: 50px;    
width: 100px;    
height: 100px;    
background-color: black;    
position:absolute;    
display：inline-block;    
overflow：hidden;
}
.content{    
width: 50px;    
height: 50px;    
margin-left: 50px;    
background-color:red;
}

margin合并 不解决

直接多加点数值用数学方法

 <div class="demo1">1</div>
 <div class="demo2">2</div>
 
 .demo1{    
 background-color: red;    
 margin-bottom: 200px;
 }
.demo2{    
background-color:yellow;    
margin-top: 200px;
} 

浮动元素

 1.浮动元素产生了浮动流        
 所有产生了浮动流的元素，块级元素看不到他们        
 产生bfc的元素和文本类属性的元素以及文本都能看到浮动元素

伪元素 天生就存在

span::before{    
content: "dsd";    
display: inline-block;
}
span::after{    
content: "asd";
}

利用伪元素清除浮动

父级元素包裹浮动元素

 三步
.wrapper::after{    
content:"";    
clear: both;    
display: block;
}

position：absol； float: left;系统自动就设置成inline-block 格式