面包屑向右浮动，但仍阻止其他内容以内联方式压缩

Question

在Breadcrumbs里面，我有home/profile

以下是理想的布局，其中Breadcrumbs浮动在右边，而Other contents不浮动在左边。

Ver1

--------------------
        home/profile
--------------------
Other contents here..

现在，如果我将css float:right添加到Breadcrumbs，则所有内容都被压缩到一行。如何避免这种情况发生并实现Ver1

Ver2

-------------------------------------
Other contents here...   home/profile
-------------------------------------

我也在使用react material-ui

Answer 1

在“面包屑”之后添加一个clearfix div以修复浮动。

<Breadcrumbs/>
<div className='clearfix'></div>

然后在CSS中

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: block;
}