如何使用jQuery查找DOM中的浮动元素

核心判断逻辑很直接：只要元素浏览器最终计算后的float属性值为left或right，就是我们要找的浮动元素，clearfix是作用在浮动元素父级上的清除浮动方案，和查找逻辑完全无关，不需要考虑。

基础实现代码 #

用jQuery的filter方法遍历匹配元素，通过.css('float')获取计算后的浮动属性值做判断即可，jQuery已经封装好了不同浏览器获取计算样式的兼容逻辑，直接用就行：

// 查找全页面所有浮动元素
const $floatEls = $('*').filter(function () {
  const floatVal = $(this).css('float')
  return floatVal === 'left' || floatVal === 'right'
})

注意事项 #

• 不要图省事用属性选择器[style*="float"]匹配，这种写法只能抓到行内样式写了float的元素，匹配不到外部CSS、<style>标签里定义的浮动规则，遇到写法不规范的（比如float:left不带空格、多空格）还会漏判，结果完全不可靠。
• 全页面用通配符*遍历在DOM节点量级很大的页面会有一定性能开销，如果只需要查找某个特定容器下的浮动元素，缩小选择器范围即可，比如要找id为content的容器下的浮动元素，就把$('*')替换成$('#content *')。
• 如果需要排除隐藏的浮动元素，在过滤逻辑里加一层显示状态判断就行：

// 只查找可见的浮动元素
const $visibleFloatEls = $('*').filter(function () {
  const $this = $(this)
  // 跳过隐藏元素
  if ($this.css('display') === 'none') return false
  const floatVal = $this.css('float')
  return floatVal === 'left' || floatVal === 'right'
})

内容的提问来源于stack exchange，提问作者eastwater