浮動 (Float) 是指在 CSS 中一種布局方式,可以將元素沿著父元素的左側或右側浮動。
浮動的實現方法是通過 float 屬性將元素設置為浮動元素。浮動元素會貼著父元素的左側或右側進行布局。浮動元素的寬度會自動調整到它所包含內容的寬度。
.example { float: left; margin-right: 10px; /* 右側留出空隙 */ } /* 清除浮動 */ .clearfix::after { content: ""; display: table; clear: both; }
浮動的應用場景比較廣泛,常見的包括:
- 實現多列布局,比如左邊欄、右邊欄等
- 圖文、文字環繞圖片等效果
- 實現響應式布局,將元素移動到合適的位置
總的來說,浮動雖然是一種常用的布局方式,但是在特定情況下也會帶來一些問題,比如多列布局的高度問題、元素溢出等。正確地使用浮動是很重要的。
下一篇css中清除浮動流