float属性有哪些：细分类型与实用用法

float属性有left、right、none、inherit四种核心取值，是CSS中用于实现元素浮动排版的属性，可让块级元素脱离常规文档流横向排列，适配图文环绕、多列布局等场景，其中none为默认值，inherit兼容性较差、实际开发中使用频次较低，四种取值各有固定效果、适用场景与适配边界，前端日常布局优先使用left、right两种取值。

float属性基础取值与效果

float:left是最常用的浮动取值，你设置该属性后，元素会向父容器左侧浮动，脱离标准普通文档流，后续未设置浮动的正常文档流内容会环绕在元素右侧。该取值主要用于实现左对齐多列布局、图片左浮文字环绕等基础排版效果，是前端页面布局中适配性最高的浮动方式。

float:right的作用逻辑与left相反，设置后元素向父容器右侧浮动，脱离常规文档流，普通文档流内容会环绕在元素左侧。日常多用于图片右浮、页面右侧导航栏、侧边悬浮模块的排版，和left搭配可实现双侧浮动布局。

float:none是所有HTML元素的默认属性值，取值为none时，元素不产生任何浮动效果，严格遵循标准文档流布局，保持元素默认的排版状态。该取值常用来覆盖已有浮动样式，重置元素排版规则。

float:inherit会强制当前元素继承父级元素的float属性值，浏览器会读取父元素的浮动状态并同步给子元素。该取值在IE8及以下浏览器存在兼容bug，渲染稳定性较差，现代前端开发中基本不会使用。

float主流取值对比

float属性适用边界与限制

float属性仅对块级元素、行内块元素生效，纯行内元素设置float后会自动转换为行内块元素，改变原有元素显示特性。同时浮动元素仅能左右横向浮动，无法实现上下纵向浮动，这是该属性固定的排版限制。

浮动布局会产生高度塌陷问题，父容器无法被浮动子元素撑开，会导致后续页面排版错乱。你在使用left、right浮动取值后，必须通过清除浮动的方式修复布局问题，常用方法包括overflow:hidden、空标签清除浮动等。

移动端弹性布局flex普及后，float属性大多仅用于图文环绕场景，多列整体布局更推荐使用flex、grid布局，浮动布局的适用场景已被大幅精简。

float属性不支持居中浮动，没有center取值，无法通过float实现元素水平居中效果，居中排版需要搭配margin、flex等其他CSS属性实现。