CSS脫離標準流是指元素不再按照文檔流的方式排列。這種情況通常出現在以下幾個方面:
/* 1. 浮動元素 */ .element { float: left; }
在這個例子中,元素會向左浮動。在標準流中,如果元素前面有足夠的空間,它就會排在前面。但是一旦我們使用了浮動屬性,元素就會脫離文檔流。
/* 2. 絕對定位 */ .element { position: absolute; top: 0; left: 0; }
這里,元素將會被絕對定位到父級元素中。但是這樣的操作也會讓元素從標準文檔流中脫離。
/* 3. 固定定位 */ .element { position: fixed; top: 0; left: 0; }
固定定位的元素會固定在瀏覽器窗口中。這同樣會導致元素的脫離標準流。
/* 4. 彈性布局 */ .container { display: flex; }
彈性布局提供了許多工具來控制布局中各個元素的大小,位置,排列順序等。但是這樣的操作同樣會導致標準文檔流的破壞。
總之,CSS脫離標準流極大地提高了我們的靈活性。但我們應該謹慎使用,并避免它對文檔的其余部分造成負面影響。
上一篇css脫離文檔流知乎