设置float:left和float:right后，如何正确使用clear属性？

你的导航栏里同时存在float:left的.left元素和float:right的.right元素，这两个浮动元素会让后续的普通文档流元素自动“绕开”它们。

• 若给后续div仅设置clear:right，它只会避开右侧的浮动元素，但仍会受左侧浮动元素影响——比如左侧浮动元素下方有剩余空间时，后续元素可能会贴在左侧浮动元素的右侧显示，无法实现“换行到所有浮动元素下方”的预期效果。
• 而clear:both会让元素同时避开左右两侧的所有浮动元素，确保它完全处于前面所有浮动元素的下方，彻底消除浮动对后续布局的干扰。

额外小提示：你的.header父元素因为子元素都是浮动的，可能会出现高度塌陷问题（父元素高度为0），可以给.header添加以下样式修复：

.header::after {
  content: "";
  display: table;
  clear: both;
}

内容的提问来源于stack exchange，提问作者stoex