CSS中的浮動是一種非常有用的布局方式。但有時我們需要讓元素浮動但又不占空間,這就需要使用一些特殊的技巧。
.box{ float: left; width: 100px; height: 100px; margin-right: -100%; }
使用margin-right: -100%會讓浮動元素的寬度變成0,因此不會占用空間。但是這時候可能會出現(xiàn)浮動元素的位置不對,需要進行調(diào)整。
.parent{ overflow: hidden; } .box{ float: left; width: 100px; height: 100px; margin-right: -100%; }
使用overflow: hidden可以清除浮動,同時解決位置不對的問題。這種方法也可以使用偽類的方式實現(xiàn)。
.parent::after{ content: ""; display: block; clear: both; visibility:hidden; height:0; }
在父元素上使用::after偽類,清除浮動,同樣可以避免浮動元素占用空間。
總之,以上這些方法可以幫助我們在需要使用浮動布局時,避免元素占據(jù)空間的問題。
上一篇css好看的li樣式
下一篇css好看的提示框