可使用float属性实现HTML元素左右浮动布局，配合clear清除影响、伪元素解决父容器塌陷，或用flexbox、CSSGrid等现代方案替代。

Grid布局与浮动混用必然出问题，因Grid容器内float无效，而兄弟或嵌套浮动会干扰文档流，导致错位、塌陷；应分离职责：Grid管整体结构，浮动仅限隔离的局部上下文。

::after清除浮动更可靠，因其通过插入伪元素并触发BFC来撑开父容器，不污染HTML语义；推荐写法为content:""+display:table+clear:both。

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

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

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

内容跑到浮动元素旁边是因为浮动元素脱离文档流，后续块级元素会向上贴靠其空白区域；解决方法是用clear:both强制换行，或采用BFC、clearfix、Flex/Grid等现代方案。

子菜单显示不全的主因是父容器overflow:hidden或定位上下文未正确建立；应移除溢出隐藏、设父项position:relative、调整top/left/z-index，并在响应式时适配定位与宽度。

初学者应从HTML语义化结构、块级/行内元素差异、float三栏布局、Flexbox居中与等分、响应式导航栏五方面入手：先建标准HTML5骨架，用等标签划分区域；理解块级元素独占一行、行内元素并排显示；通过float或display:flex实现多列；用justify-content/align-items居中；导航栏...

浮动导致父容器高度塌陷，文字被图片“顶开”，根本原因是浮动元素脱离文档流；推荐用display:flow-root创建BFC来解决，兼容现代浏览器，或退而采用伪元素清除法；优先考虑Flex/Grid替代浮动，避免副作用。

浮动元素高度不一致会导致父容器塌陷和布局错位，根源在于浮动脱离文档流；需通过清除浮动（如伪元素法）并配合vertical-align、Flex或Grid实现对齐与包裹。

.clearfix是为解决浮动元素导致父容器高度塌陷而设计的CSS方案，通过伪元素插入并清除浮动，避免溢出裁剪等副作用，兼容性优于display:flow-root。