本文將介紹CSS中脫離文檔流的三種方式。

一、浮動(dòng)(float)

.box{
float: left;
}

浮動(dòng)是一種常見(jiàn)的脫離文檔流的方式，它可以讓元素從文檔流中脫離出來(lái)并移動(dòng)到指定的位置，同時(shí)可以讓其他元素環(huán)繞在其周圍。

二、絕對(duì)定位(position)

.box{
position: absolute;
top: 0;
left: 0;
}

絕對(duì)定位也是一種常用的脫離文檔流的方式，它可以讓元素相對(duì)于其最近的已定位祖先元素的位置來(lái)定位。

三、固定定位(fixed)

.box{
position: fixed;
top: 0;
left: 0;
}

固定定位與絕對(duì)定位類似，區(qū)別在于它相對(duì)于瀏覽器窗口來(lái)定位，即無(wú)論頁(yè)面如何滾動(dòng)，該元素始終固定在瀏覽器窗口的某個(gè)位置。

以上三種方式都可以脫離文檔流，但也會(huì)帶來(lái)一些問(wèn)題，如浮動(dòng)可能會(huì)導(dǎo)致父元素高度塌陷，絕對(duì)定位和固定定位會(huì)將元素從文檔流中徹底脫離，而無(wú)法對(duì)其產(chǎn)生影響。

在使用這些脫離文檔流的方式時(shí)，需要根據(jù)實(shí)際情況選擇合適的方式，并注意其可能帶來(lái)的影響。