float,absolute脫離文件流的總結

看風景就發表於2018-08-29

dom元素脫離文件流，有如下幾種方式：

1. float

脫離文件流，其他dom元素無視他，在其下方佈局，但是其未脫離文字流，其他元素的文字會認為他存在，環繞他佈局。
父元素會無視他，因此無法獲取其高度，這也就是浮動元素父元素高度塌陷的原因。

下面是一個例子：
特別注意的是，浮動元素後面元素的文字雖然對浮動元素形成環繞，但其位置依然受後面元素的寬高的影響。如果
後面元素的寬度過小，文字將不能在右側環繞，而是顯示在浮動元素下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            color:#FFF;
        }
        #container {
            width:500px;
            height:250px;
            background:#039;
        }
        #A {
            float:left;
            width:200px;
            height:200px;
            background:#C00;
        }
        #B {
            width:480px;
            height:230px;
            background:#000;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="A">你好</div>
        <div id="B">
          第一，絕對定位與浮動的區別。絕對定位是將元素徹底從文件流刪除，並相對於其包含塊定位（包含塊可能是文件中的另一個元素或者是初始包含塊），元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣，該元素再也不會影響其他元素的佈局了。如果對元素A使用絕對定位的話，元素B佔據元素A之前的位置，與元素A重合在一起，並被元素A覆蓋。如圖所示。
        </div>
    </div>
</body>
</html>

2. absolute

完全脫離文件流，其他元素無視他，在其下方佈局

3. fixed

完全脫離文件流

4. relative

半脫離文件流，相對自身位置偏移，其自身位置還在，依然佔據文件流

 


參考：https://blog.csdn.net/cxl444905143/article/details/17361045
         https://blog.csdn.net/thelostlamb/article/details/79581984

相關文章