把position：absolute改成relative后，為何布局就不一樣了，第三個直接換行了
<!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">當非float元素和float元素挨在一起的時候，非float元素會排斥float元素，所以導致后面的float元素換行了，
????????可以將float元素排在非float元素之前，又或者把非float元素設置為float，或使用position:absolute
????</div>
????<div?class="right"></div>
</body>
</html>
2020-06-11
相對定位的盒子不脫離標準流，又因為middle盒子是塊級元素，所以同為塊級元素的right會被擠下來。
2020-04-22
relative是相對定位，是相對于元素的初始位置，也就是如果沒有position時的位置。這里如果沒有position，right原本應該在的位置就是圖中現在所在的位置，后面你又規定了right:0、top:0，所以位置不變。