浮动元素自身背景边框正常显示，但父容器因子元素浮动而塌陷导致背景边框无法包裹；通过清除浮动或触发BFC可解决，如使用overflow:hidden或伪元素after配合clear:both。
当使用 float 属性使元素脱离正常文档流时，其背景（background）和边框（border）的显示可能会出现不符合预期的情况，尤其是在包含浮动子元素的父容器中。理解 float 与 background、border 的搭配使用方式，有助于避免布局问题。
浮动元素本身的背景与边框正常显示
被设置为 float 的元素本身会生成一个块级框，其 background 和 border 会正常渲染。
例如：给一个 div 设置 float: left，同时添加 border 和 background-color，该 div 的边框和背景颜色会完整显示。
说明：浮动不会影响元素自身的装饰属性，只要设置了宽高或内容撑开，视觉效果就和普通块元素一样。
父容器无法包裹浮动子元素的问题
当父元素内部的子元素全部浮动后，父元素往往“塌陷”——高度变为 0，导致其背景和边框无法正确包裹子元素。
常见现象：父 div 没有设置高度，内部几个 float:left 的 div，结果父 div 的 background 和 border 看不到或只显示一条线。
原因：浮动元素脱离了标准文档流，父元素无法感知其存在。
解决父容器塌陷的常用方法
为了让父元素正确显示 background 和 border，必须让其包含浮动元素。以下是几种有效方式：
- 使用 clear 清除浮动：在最后一个浮动元素后添加一个清除浮动的元素，如 <div style="clear:both;"></div>。
- 触发 BFC（块格式化上下文）：给父元素设置 overflow: hidden、overflow: auto 或 display: flow-root，使其形成 BFC，自动包含浮动子元素。
- 使用伪元素清除法（推荐）：通过 CSS 添加 :before 或 :after 伪元素并配合 clear。例如：
.container::after {
content: "";
display: block;
clear: both;
}
这种方法语义清晰，无需额外 HTML 标签。
浮动与背景图的注意事项
若浮动元素设置了 background-image，图像会随元素一起浮动并正常显示。但需注意：
- 确保元素有明确尺寸或内容撑开，否则背景图可能不显示。
- background-size、background-position 等属性不受 float 影响，可正常配置。
基本上就这些。float 不会隐藏 background 或 border，关键在于父级是否能正确包含浮动元素。合理清除浮动或创建 BFC，就能让背景和边框按预期展现。
