Li为什么浮动不上去？
在网页的布局中我们常常使用到li标签，而li标签默认是块级元素，如果我们需要让它们横向排列，往往会添加浮动属性，可是有时候我们会发现，li标签浮动不上去，该怎么办呢？
1. 父元素高度问题
当我们给li标签添加浮动属性后，如果父元素没有设置高度，那么父元素的高度就会变成0，如果父元素的高度为0，那么li标签就没有地方可以浮动，因此我们需要给父元素添加样式，设置父元素的高度为auto或者固定的高度。
```css
ul {
height: auto;
overflow: auto;
}
```
2. 父元素边框问题
当我们给li标签添加浮动属性后，如果父元素有边框，那么父元素的边框会把li标签挤到下一行，这是因为我们没有考虑到边框的宽度，因此我们需要给父元素添加样式，设置父元素的宽度为auto或者减少父元素边框的宽度。
```css
ul {
width: auto;
border: none;
}
```
3. 清除浮动影响
有时候我们给li标签添加浮动后，会发现它下面的元素也跟着浮动了，这是因为在父元素中有浮动元素，而浮动元素的存在会影响父元素中的其他元素，因此我们需要在父元素中添加清除浮动的代码。
```css
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
```
4. 使用flex布局代替浮动
如果你仍然遇到浮动无法解决的问题，我们可以使用flex布局代替浮动，flex布局可以很方便地实现元素的排列，它是现代前端布局的首选方案，可尝试如下代码。
```css
ul {
display: flex;
}
```
在网页开发中，li标签经常用于制作导航栏或者横向列表，当我们给li标签添加浮动属性后，出现浮动问题时，我们需要检查以下几点，确定父元素高度和边框的设置是否合适，是否需要清除浮动，如果依然无法解决，可以尝试使用flex布局代替浮动。