DEV Community
·
在CSS中使用`float`属性
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
浮动属性最初用于使HTML元素（如图片）脱离正常流动并浮动在其他元素上。虽然开发者曾用浮动设计网页布局，但现代布局技术如网格和弹性盒子使浮动逐渐回归其原始目的。使用clear属性可以消除浮动对其他元素布局的影响。
🎯
关键要点
- 浮动属性最初用于使HTML元素（通常是图片）脱离正常流动并浮动在其他元素上。
- 开发者曾用浮动设计网页布局，使多个信息列并排显示。
- 现代布局技术如网格和弹性盒子使浮动逐渐回归其原始目的。
- 使用clear属性可以消除浮动对其他元素布局的影响。
- clear属性有四个值：none（默认）、left、right和both。
- 设置为left时，左侧浮动的元素的副作用被移除。
- 设置为right时，右侧浮动的元素的副作用被移除。
- 设置为both时，所有浮动元素的副作用被移除。
❓
延伸问答
float属性的最初用途是什么？
float属性最初用于使HTML元素（通常是图片）脱离正常流动并浮动在其他元素上。
为什么开发者曾使用float属性设计网页布局？
开发者使用float属性设计网页布局，以便多个信息列可以并排显示。
现代布局技术如何影响float属性的使用？
现代布局技术如网格和弹性盒子使float属性逐渐回归其原始目的，减少了其在布局中的使用。
如何使用clear属性消除浮动的影响？
使用clear属性可以消除浮动对其他元素布局的影响，clear有四个值：none、left、right和both。
clear属性的不同值有什么作用？
设置为left时，移除左侧浮动元素的副作用；设置为right时，移除右侧浮动元素的副作用；设置为both时，移除所有浮动元素的副作用。
使用float属性时，后续元素会发生什么变化？
当使用float属性时，所有后续的元素会移动上来填补浮动元素原本的位置。
➡️
