为何在::before伪元素中使用clear:both无效？

你用.cue::before伪元素设置clear:both无效的核心原因是：

• clear属性仅对元素自身生效，作用是让当前元素的上边缘低于之前所有浮动元素的下边缘。
• 伪元素是.cue的内部子元素，它的clear只能清除.cue内部的浮动，无法影响.cue自身与外部浮动元素的位置关系，自然解决不了多个浮动.cue重叠的问题。

因为你无法修改HTML结构，只能通过CSS调整，以下是两种可靠方案：

方案1：给.cue本身添加清除浮动规则 #

直接让每个.cue清除左侧（或两侧）的浮动，确保每个.cue都在前一个浮动元素下方开始排列，避免重叠。同时给主内容区域设置左侧外边距，避开.cue的布局范围：

/* 左侧提示栏样式 */
.cue {
  float: left;
  width: 25%; /* 自定义左侧栏宽度 */
  clear: left; /* 关键：清除左侧浮动，强制每个cue换行 */
  padding-left: 12px;
  border-left: 3px solid #e0e0e0;
  margin-right: 16px;
  margin-bottom: 16px;
}

/* 主内容区域，避开左侧cue的空间 */
/* 假设主内容是.cue的兄弟元素，可根据实际标签调整选择器 */
.cue + * {
  margin-left: calc(25% + 16px); /* 对应cue的宽度+右侧间距 */
  margin-bottom: 16px;
}

方案2：用Flexbox替代float（更稳定的现代布局） #

如果你的笔记容器有统一的父元素，可以用Flexbox重构布局，彻底避免float带来的重叠问题：

/* 笔记容器，假设父类是.note-wrapper */
.note-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cue {
  flex: 0 0 25%; /* 固定左侧栏宽度，不拉伸不收缩 */
  padding-left: 12px;
  border-left: 3px solid #e0e0e0;
  margin-right: 16px;
}

/* 主内容占剩余宽度 */
.note-wrapper > .main-content {
  flex: 1;
}

如果没有统一父元素，也可以用相邻兄弟选择器配合Flex：

.cue {
  float: none;
  display: flex;
  width: 25%;
  padding-left: 12px;
  border-left: 3px solid #e0e0e0;
}

.cue + * {
  display: flex;
  width: calc(75% - 16px);
  margin-left: 16px;
}

/* 让cue和内容并排 */
.cue, .cue + * {
  float: left;
  clear: both; /* 强制每组内容换行 */
}

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