如果将前一个兄弟设置为float宽度为100%并且将以下兄弟设置为display: flex,则后者将溢出父容器而不是换行到新行.
对于任何其他display值,但flex(或grid)它包装,因为它应该,所以它设置为什么时不会flex
.float-left {
float: left;
width: 100%;
}
.display-flex {
display: flex;
background: yellow;
}
/* Demo css */
.container {
max-width: 80%;
margin: auto;
background: white;
}<div class="container">
<div class="float-left">I'm floating left, with a width of 100%.</div>
<div class="display-flex">'Floating left' takes up 100% of the space, but still i don't go onto a new line?</div>
</div>