1. 场景分析：为何一个浮动容器会同时包含浮动与非浮动子项
浮动与非浮动的行为差异
在一个容器里，浮动子项会脱离常规文档流，导致父容器的高度可能不再按预期增长，出现高度塌陷的现象。
非浮动子项仍然占据正常文档流，它们会绕着浮动项排列，除非你应用清除或修改布局。
常见场景与需求
如果你希望容器同时容纳两种布局元素，最关注点在于容器如何正确包裹浮动以及非浮动内容的显示顺序。
两个核心目标是：确保父容器高度包含浮动内容，以及 控制非浮动内容的换行行为。
2. 清除非浮动项的做法
方法一：对非浮动项应用 clear: both
通过给需要换行到其下方的非浮动项加上 clear: both，可以强制它们在浮动之后独占一行，避免被浮动项挤压。
这会带来一个直观的布局：浮动项在上，非浮动项在新的一整行，从而确保容器内容按顺序展示。
/* 示例：清除非浮动项 */
.container { border: 1px solid #ccc; }
.float-item { float: left; width: 120px; height: 60px; background: #f6a; margin: 4px; }
.non-float { clear: both; background: #ddd; padding: 8px; }使用上述代码时，非浮动项会在所有浮动项之后开始的新一行，保持简单直观，但会牺牲一些布局紧凑性与灵活性。
方法二：对父容器应用 clearfix/overflow
另一种常见做法是让父容器自动包含浮动项的高度，从而让非浮动项继续自然流动，不需要逐个清除。
/* 经典 clearfix 实现（两种常用方式之一） */
.container:after { content: ""; display: table; clear: both; }/* 或使用 overflow 触发包含 */
.parent { overflow: hidden; }在这里，clearfix 或 overflow 能够让父容器包裹浮动内容，从而避免高度塌陷，也兼容后续的非浮动子项自然排列。
3. 将非浮动项放在清除浮动后的容器中
结构分离的实现思路
如果你希望浮动与非浮动严格分段，可以将非浮动内容放在一个“清除浮动后的容器”中：在浮动内容结束后放置一个清除元素，然后再单独渲染非浮动部分。
这种做法的好处是：布局更清晰，后续修改浮动区域不会影响非浮动区域，并且方便在响应式设计中对不同区域应用不同的布局策略。
<div class="layout"><div class="floats"><div class="item" style="float:left">A</div><div class="item" style="float:left">B</div></div><div class="clear-block"></div><div class="non-floats"><p>非浮动内容1</p><p>非浮动内容2</p></div>
</div>在这个例子里，清除块确保浮动区域完成后再进入非浮动内容，避免二者混排，结构更具可维护性。
示例样式
.layout { width: 100%; }
.floats { /* 浮动区域 */ }
.floats .item { float: left; width: 120px; height: 60px; margin: 4px; }
.clear-block { clear: both; height: 0; overflow: hidden; } /* 清除浮动后的位置锚点 */
.non-floats { background: #eee; padding: 10px; }通过上述结构，浮动的区域完全清除后再进入非浮动区，能够实现更可控的排布，尤其在需要多列浮动和不同区域的组合时。
4. 实践对比与注意点
四种常见策略的对比
当遇到 CSS 浮动容器同时包含浮动与非浮动子项时，最关键的点是是否需要 容器高度包裹浮动，以及 非浮动内容的排布形式。
若目标是简单的自适应高度，且后续元素需要与浮动区域分离，使用 clear 或额外容器分离是更为直观的选择。
响应式设计的实际要点
在响应式布局中，避免对大量非浮动项施加 clear 会让排版更灵活；而当多列浮动与文本并排时，利用 clearfix/overflow/新容器技术可以保持兼容性。
快速对比总结性要点
关键在于：要么让父容器本身包含浮动（清除浮动形成独立容器高度），要么把非浮动内容放在清除浮动之后的独立区域，二者都能达到清晰的布局效果。
