使用clear属性可解决浮动导致的页眉页脚错乱，通过clear:both确保页脚位于浮动元素下方，并用伪类清除页眉浮动影响，推荐逐步采用Flexbox或Grid布局替代传统浮动方案。
在使用浮动（float）进行布局时，页眉和页脚容易被浮动元素影响位置，导致布局错乱。通过合理使用 clear 属性，可以有效清除浮动带来的影响，保证页眉和页脚的完整性。
理解 clear 属性的作用
clear 属性用于控制元素两侧是否允许有浮动元素。常见取值包括：
- clear: left — 元素左侧不允许有浮动元素
- clear: right — 元素右侧不允许有浮动元素
- clear: both — 两侧都不允许浮动元素，最常用
- clear: none — 默认值，允许两侧浮动
当页脚紧随多个浮动的栏目时，若不清除浮动，页脚可能会上移进入内容区域。给页脚添加 clear: both 可确保它始终位于所有浮动元素下方。
为页脚添加 clear 防止上移
如果主内容区使用了左右浮动的结构（如 aside 和 article），页脚必须清除浮动以正确显示在底部。
立即学习“前端免费学习笔记（深入）”；
footer {
clear: both;
width: 100%;
background: #333;
color: white;
text-align: center;
padding: 20px 0;
}
这样即使前面的 div 使用了 float: left 或 float: right，页脚也不会被“吸入”到上方的浮动流中。
页眉中清除浮动的必要性
页眉（header）中常包含 logo 和导航栏，若其中一个浮动，可能导致父容器塌陷或背景不显示。可在页眉末尾添加一个清除浮动的“清道夫”元素，或使用伪类方法。
header::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
这种方法不会增加额外标签，同时确保 header 包裹住所有内部浮动子元素，背景和边框正常显示。
现代布局的替代方案
虽然 clear 能解决浮动问题，但更推荐使用 Flexbox 或 Grid 布局来避免浮动带来的复杂性。
例如用 Flex 实现页眉：
header {
display: flex;
justify-content: space-between;
align-items: center;
}
这种写法无需浮动，自然无须 clear，结构更清晰稳定。
基本上就这些。如果仍在使用浮动布局，记得在页眉和页脚关键位置使用 clear:both 来保障结构完整。长期来看，转向 Flex 或 Grid 更省心。
