Html 为什么（float:right；）不’；不行？蓝色的盒子应该在右边

我在左边有一个项目列表（珊瑚框），我需要将主要内容放在蓝色框中（珊瑚框旁边的右边），但它们是重叠的（下图） 下面是我的HTML和CSS，你认为是什么导致了重叠以及如何修复它？ 谢谢

。类别树{
宽度：300px；
高度：900px；
字体大小：14px；
填充顶部：20px；
背景颜色：珊瑚；
}
.左菜单李{
填充顶部：30px；
填充：6px 0 2px；
列表样式：无；
}
.左菜单类别{
宽度：240px；
颜色：黑色；
}
.左菜单类别a{
颜色：黑色；
左侧填充：40px；
}
.类别树a：悬停{
文字装饰：下划线；
}
人力资源{
边缘顶部：18px；
边缘底部：15px；
宽度：200px；
高度：1px；
边框宽度：0；
背景色：#B8B8
}
.蓝盒子{
浮动：对；
位置：绝对位置；
显示器：flex；
背景颜色：浅蓝色；
宽度：800px；
高度：900px；
}

此处文本

不要将

浮动

用于造型目的。这是2012年之前的一次误用黑客行为。自2012年以来，您已经建立了

Flexbox

，自2015年以来

Flexbox

和

CSS网格

已经建立，不会像

float

那样引发太多可能的问题。Float从来就不是一个样式化工具，只是用来在一个段落（比如报纸）中浮动图像

只需使用flexbox：

为wrappe提供flex属性，并将其宽度更改为100%以响应

为蓝色文本框提供属性

flex grow:1

以消耗剩余空间

。类别树{
宽度：100%
最小高度：900px；
字体大小：14px；
填充顶部：20px；
显示器：flex；
}
导航{
背景颜色：珊瑚；
}
.左菜单李{
填充顶部：30px；
填充：6px 0 2px；
列表样式：无；
}
.左菜单类别{
宽度：240px；
颜色：黑色；
}
.左菜单类别a{
颜色：黑色；
左侧填充：40px；
}
.类别树a：悬停{
文字装饰：下划线；
}
人力资源{
边缘顶部：18px；
边缘底部：15px；
宽度：200px；
高度：1px；
边框宽度：0；
背景色：#B8B8
}
.蓝盒子{
显示器：flex；
背景颜色：浅蓝色；
柔性生长：1；
}

此处文本

我实际上建议您使用网格，而不是使用float或flexbox

这是您的html：

<div class="category-tree">
  <nav class="left-menu">
    <ul class="left-menu-categories">
      <li class=""><a href="#" title="Category"><b>Category</b></a></li>
      <li class=""><a href="#" title="Category">Category</a></li>
      <li class=""><a href="#" title="Category">Category</a></li>
      <li class=""><a href="#" title="Category">Category</a></li>
      <li class=""><a href="#" title="Category">Category</a></li>
      <li class=""><a href="#" title="Category">Category</a></li>
      <hr>
    </ul>
  </nav>
  <div class="blue-box">
    <p>Text Here</p>
  </div>
</div>

这里发生的事情是，您说的是，带有类category树的主div中的第一个元素将是左侧的第一个元素，下一个元素即带有蓝色框的div将位于右侧。当您使用移动设备时，您可以使用正确的大小更改媒体查询中的css，然后您的css将是：

category-tree{
     display:grid;
     grid-templates-column: auto ;
     /* you can add any padding here as well */
    }

---

这将是安排一切的好方法。可以通过添加轴网柱间距：2rem；或者您想要的任何其他值。然后，对于每个元素，您可以在为每个元素创建的其他类中添加填充或任何需要的内容。

。类别树宽度必须大于蓝框宽度。尝试宽度：100%并设置位置relative@HakanTurkmen什么是

位置：相对位置应该怎么做？在这种情况下，它毫无意义，什么也不做。给
.category tree
一个大于
.blue box
的宽度也无法修复它。它必须大于
.blue box+nav
，才能安装。但是，这并不能修复使用float进行样式化的基本编码错误。而且完全没有反应，几乎不适用于现代设备屏幕。嘿！我按照你的方式做了，现在它确实工作了。我不需要它的一个人，我需要他们分开。在导航中添加一个
右边距
，或者在蓝框中添加一个
左边距
，如果你想分开，或者另外添加问题的更多代码细节，那么我可以帮助你完全集成它。
category-tree{
 display:grid;
 grid-templates-column: auto auto ;
 /* you can add any padding here as well */
}

category-tree{
     display:grid;
     grid-templates-column: auto ;
     /* you can add any padding here as well */
    }