CSS3中的float屬性是用來定義元素的浮動方向、位置以及周圍元素的環繞方式。對于排版比較復雜的網頁,float屬性能夠幫助我們實現簡單的布局需求。
float屬性可以取left, right, none三個值。其中,left表示元素向左浮動, right表示元素向右浮動, none表示元素不浮動。
下面是一個簡單例子,使用float屬性將兩個圓形圖片放在一行并排展示。
.image { float:left; width:50%; }
此時,兩個圖片會左右排列,橫向占據屏幕一半的寬度。更進一步,我們可以使用clear屬性來清除元素的浮動,使得下面的元素不會受到浮動元素的影響。
例如,以下代碼段使用clear:both屬性將一個段落從浮動元素的影響下進行了分隔。
.image { float:left; width:50%; } .separator { clear:both; }這是一個段落,它不會被浮動元素的影響所擾。
除了浮動元素,我們也可以將容器元素進行浮動來實現布局效果。例如,下面的例子展示了通過對父元素設置float屬性來實現左右兩欄布局的效果。
.left-col { width:200px; float:left; } .right-col { width:calc(100% - 200px); float:right; }這是左欄這是右欄
以上就是CSS3中float屬性的用法介紹。它對于簡單的布局需求來說非常方便、實用。