把position：absolute改成relative后，為何布局就不一樣了，第三個(gè)直接換行了
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
????<style>
????????body{
????????????margin:?0;
????????????padding:?0;
????????}
????????.left{
????????????width:?200px;
????????????height:?300px;
????????????background-color:?chartreuse;
????????????float:?left;
????????}
????????.middle{
????????????height:?300px;
????????????background-color:?chocolate;
????????????/*?float:?left;?*/
????????????margin:?0?410px?0?210px;
????????}
????????.right{
????????????width:?400px;
????????????height:?300px;
????????????background-color:?cornflowerblue;
????????????/*?float:?right;?*/
????????????/*?position:?absolute;?*/
????????????position:?relative;
????????????right:?0;
????????????top:?0;
????????}
????</style>
</head>
<body>
????<div?class="left"></div>
????<div?class="middle">當(dāng)非float元素和float元素挨在一起的時(shí)候，非float元素會(huì)排斥float元素，所以導(dǎo)致后面的float元素?fù)Q行了，
????????可以將float元素排在非float元素之前，又或者把非float元素設(shè)置為float，或使用position:absolute
????</div>
????<div?class="right"></div>
</body>
</html>
2020-06-11
相對(duì)定位的盒子不脫離標(biāo)準(zhǔn)流，又因?yàn)閙iddle盒子是塊級(jí)元素，所以同為塊級(jí)元素的right會(huì)被擠下來(lái)。
2020-04-22
relative是相對(duì)定位，是相對(duì)于元素的初始位置，也就是如果沒(méi)有position時(shí)的位置。這里如果沒(méi)有position，right原本應(yīng)該在的位置就是圖中現(xiàn)在所在的位置，后面你又規(guī)定了right:0、top:0，所以位置不變。