最推荐伪元素+clearfix方案，统一用.clearfix类；现代项目优先用display:flow-root触发BFC；禁用空标签和全局clear重置，响应式下需同步调整清浮方式。

最推荐用flexbox实现横向并列，语义清晰、响应式友好；grid适合固定列数的复杂布局；inline-block轻量但需处理间隙；float已过时，仅用于兼容旧项目。

HTML5无新浮动清除机制，clear:both失效主因是父容器未形成BFC致高度塌陷；推荐伪元素法.clearfix::after清除浮动，或直接用flex/grid替代float布局。

flex布局比float更稳，因其天然包含BFC、避免高度塌陷与清除浮动问题，支持响应式换行、精准对齐和等分布局；但图文环绕、IE9-兼容及无维护压力的遗留代码仍宜保留float。

最推荐清除浮动的方案是伪元素法（clearfix），配合display:flow-root等现代BFC触发方式；伪元素法结构干净、兼容性好，而flow-root语义清晰、无副作用，Flex/Grid则可根本规避浮动问题。

HTML5不提供创建BFC的新语法，BFC是CSS渲染规范概念；触发方式包括display:flow-root（推荐）、overflow:hidden/auto/scroll、display:flex/grid/table-cell等，但需注意兼容性与副作用。

flex-wrap、auto-fit+minmax()和inline-block是实现多块内容自动换行的三大方案：flex-wrap控制换行方向与行为，auto-fit+minmax()实现响应式列数自适应，inline-block因空白符和对齐问题已不推荐。

margin:auto在float元素上无效，因为浮动元素脱离文档流，宽度收缩且不参与自动宽度分配，导致margin:auto缺失计算依据；必须取消float才能生效。

浮动元素脱离文档流导致父容器高度塌陷，解决核心是让父容器感知浮动子元素高度；常用方法有三：1.在浮动末尾插入clear:both的空标签；2.给父容器触发BFC（如overflow:hidden、display:flow-root）；3.用伪元素::after清除浮动。

导航栏错位主因是float与inline-block混用引发盒模型冲突、空白符间隙及浮动塌陷；应统一布局方式，优先采用flex布局，并注意box-sizing、vertical-align等细节。

footer被浮动元素顶上去是因为父容器高度塌陷；应给footer加clear:both，或让父容器触发BFC（如overflow:hidden或display:flow-root）。

float元素导致父容器高度塌陷，因脱离文档流；推荐用overflow:hidden或display:flow-root触发BFC解决，避免clear:both冗余标签；现代布局应优先使用flex/grid而非float。