在 CSS 中,文檔流是指 HTML 元素按照與 HTML 代碼編寫順序一致的方式排列的方式。
.box { float: left; width: 50%; } .box img { max-width: 100%; height: auto; }
上述 CSS 代碼中,我們使用了浮動( float )屬性將兩個盒子分別放在頁面的左右兩側。這就打破了文檔流,導致在沒有進行其他設置的情況下,頁面中的其他元素將會圍繞著這兩個盒子排列。
除了浮動,CSS 中還有一些其他的屬性同樣會影響文檔流,例如:
- 定位屬性( position )
- 顯式寬度和高度( width 和 height )
- display: inline-block
這些屬性會使元素脫離文檔流,因此在進行布局時需要注意。
盡管脫離文檔流可能會帶來一些靈活性和復雜度,但在某些情況下,使用文檔流可以讓代碼更加清晰和易于維護。同時,遵循文檔流也有助于確保網站在不同的設備和瀏覽器上都能夠正確地顯示。