CSS中經常使用兩排并成一排的技巧,可以使頁面布局更加美觀和緊湊。這種技巧通常使用float屬性和clear屬性實現。
.row { overflow: hidden; } .col { float: left; } .clear { clear: both; }
在上面的代碼中,我們將浮動元素包含在.row容器中,并使用overflow: hidden;使其產生BFC(塊格式化上下文)。這是因為浮動元素不會撐開父級元素的高度,導致無法正確布局。
接下來,我們使用float: left;將需要并排的元素設置為浮動元素。在需要換行時,我們可以添加.clear元素,使用clear: both;清除浮動。這樣可以確保下一行元素對齊,并正確排列。
使用這種技巧,我們可以輕松地實現響應式布局和復雜的頁面設計。但是,需要注意的是,過多的浮動和清除會影響頁面性能和可維護性。因此,建議盡可能地使用Flexbox和Grid布局。