我不明白为什么这不起作用：
my-selector::before {
content: "";
display: block;
clear: both;
}
我使用浮动到宽阔的样式边框中，以将元信息排除在主要内容流之外（这是尝试实现类似康奈尔笔记系统之类的东西；任何有关如何更好地做到这一点的建议都是感谢，但我仍然想知道为什么这种技术失败了！）当我有一个元注释（又名
cuecue（请注意，我无法轻松直接控制 HTML；它是从类似 Markdown 的语言生成的。但我可以添加
cue只要提示比它们注释的后续代码短，这种方法就很有效：
div.Cornell {
padding: 0 1em;
border-left: 12em solid #cfc;
}
div.Cornell div.cue {
float: left;
width: 10em;
margin-left: -12em;
display: inline-block;
}
div.Cornell div.cue::before {
content: "";
display: block;
clear: both;
}
.Cornell-summary {
margin: 1em 0;
background-color: #ffe;
padding: 0 1em 1em;
}<div class="Cornell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl. Nulla facilisi etiam dignissim diam quis enim lobortis. Tortor condimentum lacinia quis vel eros donec. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Sapien eget mi proin sed.</p>
<div class="cue">
<p>First cue: <em>Consequat interdum varius sit amet mattis vulputate. Pellentesque dignissim enim sit amet venenatis urna cursus.</em></p>
</div>
<p>The first cue should float left of this content.</p>
<p>Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Consequat interdum varius sit amet mattis vulputate. Tristique senectus et netus et malesuada fames ac turpis egestas. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Purus non enim praesent elementum facilisis. Pellentesque dignissim enim sit amet venenatis urna cursus. Nec tincidunt praesent semper feugiat nibh. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Proin nibh nisl condimentum id venenatis a condimentum. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Posuere morbi leo urna molestie at. Cum sociis natoque penatibus et magnis. Turpis nunc eget lorem dolor.</p>
<div class="cue"><p>Second cue: <em>Montes nascetur ridiculus mus mauris</em></p></div>
<p>The second cue should float left of this content</p>
<p>Nunc sed blandit libero volutpat sed cras ornare arcu. Habitasse platea dictumst vestibulum rhoncus est. Vel pretium lectus quam id leo in. Enim neque volutpat ac tincidunt. Arcu vitae elementum curabitur vitae. Montes nascetur ridiculus mus mauris. Ullamcorper sit amet risus nullam eget.</p>
</div>
<div class="Cornell-summary">
<hr/>
<h2>Summary</h2>
<p>Eu feugiat pretium nibh ipsum consequat nisl. Nulla facilisi etiam dignissim diam quis enim lobortis. Tortor condimentum lacinia quis vel eros donec.</p>
</div>但是当提示内容较长时，就会出现问题。浮动内容只是重叠。我以为我可以用
::beforeclear: bothdiv.Cornell {
padding: 0 1em;
border-left: 12em solid #cfc;
}
div.Cornell div.cue {
float: left;
width: 10em;
margin-left: -12em;
display: inline-block;
}
div.Cornell div.cue::before {
content: "";
display: block;
clear: both;
}
.Cornell-summary {
margin: 1em 0;
background-color: #ffe;
padding: 0 1em 1em;
}<div class="Cornell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl. Nulla facilisi etiam dignissim diam quis enim lobortis. Tortor condimentum lacinia quis vel eros donec. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Sapien eget mi proin sed.</p>
<div class="cue">
<p>First cue: <em>Consequat interdum varius sit amet mattis vulputate. Pellentesque dignissim enim sit amet venenatis urna cursus.</em></p>
<p>Sed cras ornare arcu dui. Erat nam at lectus urna duis convallis convallis tellus. Rhoncus est pellentesque elit ullamcorper. Feugiat nibh sed pulvinar proin. Orci a scelerisque purus semper eget duis at. Venenatis tellus in metus vulputate. Vulputate ut pharetra sit amet aliquam. Proin sed libero enim sed faucibus. Interdum velit euismod in pellentesque massa. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Facilisis leo vel fringilla est ullamcorper. Sapien nec sagittis aliquam malesuada bibendum arcu vitae.</p>
</div>
<p>The first cue should float left of this content.</p>
<p>Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Consequat interdum varius sit amet mattis vulputate. Tristique senectus et netus et malesuada fames ac turpis egestas. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Purus non enim praesent elementum facilisis. Pellentesque dignissim enim sit amet venenatis urna cursus. Nec tincidunt praesent semper feugiat nibh. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Proin nibh nisl condimentum id venenatis a condimentum. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Posuere morbi leo urna molestie at. Cum sociis natoque penatibus et magnis. Turpis nunc eget lorem dolor.</p>
<div class="cue"><p>Second cue: <em>Montes nascetur ridiculus mus mauris</em></p></div>
<p>The second cue should float left of this content</p>
<p>Nunc sed blandit libero volutpat sed cras ornare arcu. Habitasse platea dictumst vestibulum rhoncus est. Vel pretium lectus quam id leo in. Enim neque volutpat ac tincidunt. Arcu vitae elementum curabitur vitae. Montes nascetur ridiculus mus mauris. Ullamcorper sit amet risus nullam eget.</p>
</div>
<div class="Cornell-summary">
<hr/>
<h2>Summary</h2>
<p>Eu feugiat pretium nibh ipsum consequat nisl. Nulla facilisi etiam dignissim diam quis enim lobortis. Tortor condimentum lacinia quis vel eros donec.</p>
</div>我错过了一些简单的事情吗？更复杂但可行的东西？真的感觉这应该有效。
这个输出是我想要实现的，但是使用了具有
clear: bothdiv.Cornell {
padding: 0 1em;
border-left: 12em solid #cfc;
}
div.Cornell div.cue {
float: left;
width: 10em;
margin-left: -12em;
display: inline-block;
}
.Cornell-summary {
margin: 1em 0;
background-color: #ffe;
padding: 0 1em 1em;
}<div class="Cornell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl. Nulla facilisi etiam dignissim diam quis enim lobortis. Tortor condimentum lacinia quis vel eros donec. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Sapien eget mi proin sed.</p>
<div style="clear: both"></div>
<div class="cue">
<p>First cue: <em>Consequat interdum varius sit amet mattis vulputate. Pellentesque dignissim enim sit amet venenatis urna cursus.</em></p>
<p>Sed cras ornare arcu dui. Erat nam at lectus urna duis convallis convallis tellus. Rhoncus est pellentesque elit ullamcorper. Feugiat nibh sed pulvinar proin. Orci a scelerisque purus semper eget duis at. Venenatis tellus in metus vulputate. Vulputate ut pharetra sit amet aliquam. Proin sed libero enim sed faucibus. Interdum velit euismod in pellentesque massa. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Facilisis leo vel fringilla est ullamcorper. Sapien nec sagittis aliquam malesuada bibendum arcu vitae.</p>
</div>
<p>The first cue should float left of this content.</p>
<p>Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Consequat interdum varius sit amet mattis vulputate. Tristique senectus et netus et malesuada fames ac turpis egestas. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Purus non enim praesent elementum facilisis. Pellentesque dignissim enim sit amet venenatis urna cursus. Nec tincidunt praesent semper feugiat nibh. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Proin nibh nisl condimentum id venenatis a condimentum. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Posuere morbi leo urna molestie at. Cum sociis natoque penatibus et magnis. Turpis nunc eget lorem dolor.</p>
<!-- I do understand that this DIV is unnecessary; but having it
here *works* and I hope it demonstrates what I was trying to
do with my `::before` syntax. -->
<div style="clear: both"></div>
<div class="cue"><p>Second cue: <em>Montes nascetur ridiculus mus mauris</em></p></div>
<p>The second cue should float left of this content</p>
<p>Nunc sed blandit libero volutpat sed cras ornare arcu. Habitasse platea dictumst vestibulum rhoncus est. Vel pretium lectus quam id leo in. Enim neque volutpat ac tincidunt. Arcu vitae elementum curabitur vitae. Montes nascetur ridiculus mus mauris. Ullamcorper sit amet risus nullam eget.</p>
</div>
<div class="Cornell-summary">
<hr/>
<h2>Summary</h2>
<p>Eu feugiat pretium nibh ipsum consequat nisl. Nulla facilisi etiam dignissim diam quis enim lobortis. Tortor condimentum lacinia quis vel eros donec.</p>
</div>评论太长了，我就在这里总结一下。
我想做的事情是不可能的。下面创建了一个伪元素，但它不会出现在 DOM 中焦点元素之前。它出现在该元素的 content 之前：
my-selector::before {
content: "";
display: block;
clear: both;
}
因此我试图清理我实际上在里面的浮子；这没有意义。
感谢所有帮助解决这个问题的人，尤其是@TemaniAfif！
我确实解决了我的根本问题。我说过我无法控制从底层语言生成的标记。但事实证明，如果您足够仔细，您可以添加自定义标记元素。然后在我的新浮动内容之前生成一个清除 DIV 就很简单了，一切正常。