如何让侧边栏内ul元素显示在User-Icon div下方并居中？

你设置的clear: left、float: bottom不生效是必然的，原因有两个：

1. CSS不存在float: bottom这个合法属性值，float仅支持left/right/none等水平方向的浮动值，没有垂直浮动的能力。
2. clear和float属于传统标准流+浮动布局的属性，而你已经给#Sidebar设置了display: flex，flex容器的直接子元素会自动成为flex子项，浮动、清除浮动相关属性对flex子项完全无效。

另外你当前的#Sidebar样式本身有逻辑错误：默认flex布局的主轴是水平方向，所以内部的用户图标和导航列表会默认横向并排排列，根本不会上下排布；你写的align-self: flex-end是控制#Sidebar自身在父容器#dashboard里的对齐方式，和内部子元素的排列没有任何关系。

不需要修改HTML结构，仅调整对应CSS即可：

#Sidebar {
    background-color: #5c5c5c;
    height: 100%;
    width: 20%;
    display: flex;
    /* 切换flex主轴为垂直方向，子元素从上到下排列 */
    flex-direction: column;
    /* 交叉轴（水平方向）居中，实现子元素水平居中效果 */
    align-items: center;
    /* 删除原代码里错误的 align-self: flex-end */
}

#User-Icon {
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 50px;
    margin-top: 50px;
}

ul {
    width: 100%;
    /* 控制导航列表和用户图标的间距，可按需调整数值 */
    margin-top: 40px;
}

li {
    list-style: none;
    margin-top: 50px;
    /* 导航文本水平居中 */
    text-align: center;
}

额外语法提示：你当前HTML里的导航链接写法是错误的，<li a href="#">Home</li>不符合规范，a是独立标签，不是li的属性，正确写法为<li><a href="#">Home</a></li>，否则链接无法正常点击。

• Flex布局生效后，容器内直接子元素的布局规则完全由flex属性控制，传统布局的float、clear、vertical-align属性都会失效，这是你之前尝试的属性不生效的核心原因。
• Flex布局存在两个轴线：默认flex-direction: row状态下，主轴为水平方向（从左到右），交叉轴为垂直方向（从上到下）；设置flex-direction: column后，主轴切换为垂直方向（从上到下），交叉轴切换为水平方向（从左到右）。
• 主轴方向的子元素对齐通过justify-content控制，交叉轴方向的子元素对齐通过align-items控制。你的需求是子元素垂直依次排列、水平居中，只需要把主轴切换为垂直方向，再设置交叉轴居中即可实现。
• align-self是flex子项的专属属性，作用是覆盖父容器的align-items规则调整自身的对齐位置，你之前把它写在#Sidebar上，只会影响#Sidebar自身在父容器#dashboard里的位置，不会控制内部子元素的排列。

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