按钮位置异常是因浮动元素脱离文档流导致，需在浮动父容器上添加clearfix类（含::after伪元素清除）或设置overflow:hidden/display:flow-root触发BFC来修复。

video默认inline导致并排错位，解决方法：设display:block或vertical-align；推荐flex布局（display:flex+gap+flex-shrink:0）；响应式用grid（grid-template-columns+aspect-ratio）；移动端需width:100%+max-...

用Flex实现横向导航栏只需三步：容器设display:flex，子项自动横排；清除列表默认样式并设间距；美化链接并添加悬停效果。响应式时用媒体查询改flex-direction为column即可。

clear用于强制块级兄弟元素避开浮动元素换行，应加在需恢复正常流的下一个块级元素上，而非浮动元素自身；它对inline、absolute或脱离文档流元素无效，现代布局优先使用Flex/Grid。

浮动元素在HTML5中仍有效但不应用于布局，因其设计初衷是图文环绕而非容器对齐，易致高度塌陷、margin双倍、文档流错乱及响应失效；现代布局应优先使用flexbox或grid。

overflow:hidden能清除浮动是因为触发BFC使容器重算高度兜住浮动元素，但这只是副作用而非本职工作；它仅对支持BFC的元素生效，在Flex/Grid中无效，且存在裁剪失效、兼容性等问题；现代推荐用display:flow-root或伪元素clearfix清浮。

浮动导致点击区域错位的本质原因是元素脱离文档流引发父容器塌陷及后续元素上浮；推荐用display:flow-root修复，次选伪元素clearfix，避免overflow:hidden；现代布局应优先使用flex或grid替代浮动。

浮动导致父容器高度塌陷使box-shadow被裁剪，根本解法是创建BFC：优先用display:flow-root，次选overflow:hidden或::after清除浮动，并逐级检查上级溢出裁剪。

overflow:hidden不改变盒模型尺寸计算，仅裁剪contentbox内容并触发BFC；BFC导致父容器包裹浮动、阻止外边距合并、避开浮动元素，引发布局变化而非尺寸变化。

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

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

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