在CSS中,浮動(float)是一種常用的布局技術。
當元素設置了float屬性后,它會從文檔的正常流中移動,并且其他元素會環(huán)繞它。
要設定一個元素的浮動方式,需要使用float屬性。常見的取值包括left(向左浮動)和right(向右浮動)。
div { float: left; }
當使用浮動時,要注意避免出現(xiàn)浮動元素和父元素的高度不一致,導致布局錯亂的情況。
為了解決這個問題,可以使用clearfix技巧。在父元素上設置clearfix類名,同時在CSS中定義clearfix類名的樣式:
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; // 兼容IE6/7 }
除了常規(guī)浮動方式之外,還有一種特殊的浮動方式——清除浮動(clearfix)。
清除浮動就是在浮動元素后面增加一個空的塊級元素,并給它清除浮動的樣式。這樣可以防止出現(xiàn)浮動元素和父元素高度不一致的情況。
.clearfix::after { content: ""; display: table; clear: both; }
總結:在CSS中,使用浮動布局可以使元素從文檔流中脫離,并實現(xiàn)環(huán)繞效果。但在使用浮動時要注意避免出現(xiàn)元素高度不一致的問題,可以使用clearfix清除浮動。