CSS中的浮動元素是非常常用的一種布局方式,它的特點可以總結為:
float: left | right | none | inherit;
其中,left和right是將元素向左或向右浮動,none是默認值,表示元素不浮動,inherit表示繼承父元素的float屬性。
浮動元素在排版時,會盡量向左或向右移動,直到它的邊緣碰到了包含它的上級容器的邊緣或其他浮動元素的邊緣,此時它會停止移動。
浮動元素對于父容器和其他元素的影響:
(1)浮動元素脫離文檔流,不占用原有的空間,所以父容器的高度無法自動被撐起; (2)其他元素會避讓浮動元素,自動向它周圍移動; (3)父容器的邊框和背景不會被浮動元素撐開,需要進行清除浮動; (4)浮動元素所在的列,如果高度不夠,會自動向上“飄起來”。要清除浮動,常用的方法有以下兩種:
.clearfix:after { content:""; display:block; height:0; clear:both; visibility:hidden; } .clearfix{*zoom:1;}其中,第一種方法是利用CSS偽類:after在元素后面加上一個空元素,并對其進行清除浮動(clear:both),從而達到清除浮動的效果;第二種方法是利用 IE 的特殊屬性*zoom,在IE6/7中強制生成折行,從而達到清除浮動的效果。
總結起來,浮動元素是強大的布局工具,但也需要注意一些細節,比如清除浮動和避免干擾其他元素的排版等。
上一篇css浮動布局制作企業
下一篇css浮動代碼是什么