兩藍(lán)布局

.right{
    position: absolute;
    right: 0;
    background-color: aqua;
    width: 100px;
    height: 100px;
    opacity: 0.5;
}
.left{
    margin-right: 100px;
    height: 100px;
    background-color: brown;
}

垂直方向的margin父子粘合在一起,取最大值
margin塌陷
改變大盒子渲染規(guī)則

.wrapper{
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}
.content{
    margin-top: 150px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background-color: brown;
}

解決

<!-- bfc -->
    <!-- block format context -->
    <!-- 如何出發(fā)盒子的bfc 
    1,position:absolute
    2,display:inline-block
    3,float:left/right
    4,overflow:hidden溢出部分隱藏-->

.wrapper{
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    /* overflow: hidden; */
    display: inline-block;
    position: absolute;
}
.content{
    margin-top: 60px; 
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background-color: brown;
}

兄弟之間也會(huì)出現(xiàn)按

    <div class="wrapper"></div>
    <div class="content"></div>

css

.wrapper{
    width: 100px;
    height: 100px;
    margin-bottom: 200px;
    background-color: aquamarine;
}
.content{
    margin-top: 200px; 
    width: 100px;
    height: 100px;
    background-color: brown;
}

上下距離只會(huì)200px,或選取最大,不會(huì)累加
解決
寫一個(gè)下面的包含他的父類設(shè)置成overflow: hidden;

<div class="wrapper"></div>
    <div class="dasf">
    <div class="content"></div>
    </div>

.wrapper{
    width: 100px;
    height: 100px;
    margin-bottom: 200px;
    background-color: aquamarine;
}

.dasf{
    overflow: hidden;
}
.content{
    margin-top: 200px; 
    width: 100px;
    height: 100px;
    background-color: brown;
}

不能因?yàn)楦腂UG而加結(jié)構(gòu)(上面感覺白寫了)
真正的解決方法通過數(shù)學(xué)計(jì)算求他倆的總距離

浮動(dòng)元素float: right;和left后面有位置就去占一個(gè)

1,浮動(dòng)元素產(chǎn)生了浮動(dòng)流,所有產(chǎn)生了浮動(dòng)元素,塊級(jí)元素看不到他們,產(chǎn)生了bfc的元素和文本類元素(inline)以及文本都能看到浮動(dòng)元素
clear: both;清除流
如果想讓父級(jí)元素包住自己元素在最后一個(gè)子級(jí)加上clear:both;清除浮動(dòng),(不推薦用的方法:在浮動(dòng)流元素后面添加標(biāo)簽如:<p>標(biāo)簽的屬性加上清除就ok了)
推薦使用偽元素http://www.itdecent.cn/p/f8d531ab4b55
在父級(jí)元素的::after偽元素使用clear:both;
如果想要clear生效的話必須是塊級(jí)元素
那么after里面加上display block屬性就ok了
還有一種解決就是在父級(jí)元素上面添加浮動(dòng)元素的需求比如給他也添加浮動(dòng)元素,float ,inline 等
浮動(dòng)流都是位于他下面的元素

.mm{
    
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0.5;
}
.ww{
    display: inline-block;//刪除試試看
    width: 200px;
    height: 200px;
    background-color: aquamarine;
}

設(shè)置position:abolute; float:left/right會(huì)打內(nèi)部吧元素轉(zhuǎn)換成inline-block
浮動(dòng)可以做文字環(huán)繞圖片