浮動的意思是讓元素向左或向右浮動,來為其他元素空出空間。在CSS中,我們可以使用float屬性來實現元素的浮動。
例如: .img{ float: left; margin-right: 10px; }
上述代碼表示讓類名為的元素向左浮動,并且給它的右側預留10像素的空間。
同時,我們可使用clear屬性來清除浮動效果,使后面的元素不受浮動元素的影響。
例如: .clearfix::after{ content: ""; display: block; clear: both; }
上述代碼中,我們創建了一個類名為clearfix的偽元素,并通過display屬性將其轉換為塊級元素,再通過clear屬性清除浮動元素帶來的影響,來應對浮動元素造成父元素高度塌陷的問題。
最后,需要注意的是,浮動元素會影響元素的其他屬性(如寬高、邊框、背景等),需要注意相關的盒模型計算。
下一篇css的漸變效果