float属性有哪些，CSSfloat一共包含left、right、none、inherit四个基础取值，left让元素靠左浮动，右侧留出空间给其他内容环绕，right让元素靠右浮动，左侧容纳环绕内容，none是默认值，关闭浮动效果，inherit直接继承父元素的float设置，浮动会脱离常规文档流，只在块级容器内横向排布，行内元素设置浮动后自动转为块级盒模型，该属性仅对块级与行内块元素生效，给行内文本节点单独设置float不会产生浮动效果，适合图文混排、简单横向布局场景，现代弹性布局与网格布局出现后，float更多用于文字绕图，复杂多栏布局一般不再优先选用。

float属性取值详解

left是开发里使用频次较高的取值，元素向容器左侧贴靠，后面跟随的行内内容会沿着元素右侧向上环绕，你设置图片float:left，图片靠左放置，段落文字自动绕到图片右边，浮动元素不会撑开父容器高度，父容器高度塌陷是这个取值最常遇到的现象。

right和left逻辑对称，元素向容器右侧贴靠，后续行内内容从元素左侧环绕，多元素同时设置float:right时，元素会从右往左依次堆叠，不是从左向右排列，连续多个右浮动元素的顺序会和代码书写顺序对应，书写靠前的元素位置更靠右。

none是元素初始状态，不触发浮动，元素回归标准文档流，块级元素独占一行，行内元素横向排列，你需要清除某个元素的浮动效果时，直接设置float:none即可，这个取值不会带来脱离文档流的副作用。

inherit代表强制读取父元素计算后的float值，子元素本身不单独定义浮动规则，父元素设为left，子元素就跟着左浮动，父元素设为none，子元素也取消浮动，IE低版本浏览器对inherit的支持存在兼容性差异，业务开发中使用这个取值的场景偏少。

float取值对比与配套清除方案

取值文档流状态典型用途常见副作用
left脱离文档流左图右文、左栏布局父容器高度塌陷，下方元素上移
right脱离文档流右图左文、右侧悬浮模块多个元素堆叠顺序容易和预期相反
none标准文档流取消浮动、恢复默认排版无浮动相关副作用
inherit跟随父元素批量统一浮动配置旧浏览器兼容性较差

清除浮动是使用float时必须掌握的配套操作，常用三种方式，给父容器添加overflow:hidden，利用BFC块级格式化上下文包裹浮动元素，自动撑起容器高度；在浮动元素末尾增加空标签并设置clear:both，阻断后续元素向上环绕；使用伪元素::after给父容器添加clear:both，结构更干净，不会增加多余DOM节点。

clear属性有left、right、both、none，它不是用来关闭float，而是限制当前元素不和浮动元素在同一行并排，clear:both会让元素换到浮动元素下方另起一行，很多初学者会混淆float和clear的作用，直接用clear去取消浮动，不会生效。

浮动元素有边界限制。

浮动元素不能超出父容器的内边距边界，同一个容器内多个浮动元素横向空间不足时，后面的浮动元素会自动换行向下排布，浮动元素的外边距不会发生margin合并，这一点和标准文档流里的块级元素不一样。

现代CSS布局方案Flex和Grid不会产生浮动带来的高度塌陷问题，适合导航栏、多列卡片这类规整布局，float保留的优势只有文字环绕图片，这是弹性布局暂时无法简单复刻的效果，你做图文详情页的文字绕图效果，优先选用float:left或者float:right。