使左浮动元素环绕右浮动元素

Question

我有一个无序列表，列表项在div中向左浮动。在该div内部，有一个右侧浮动的侧边栏。

在此图像中，一旦到达侧边栏，您便可以看到列表项中的文本换行。但是，列表项本身没有，因此您仍会在侧边栏后面看到白色背景。

我怎样才能使列表项也包裹起来？

#container {
    background: #f8f8f8;
    border: 1px solid #d1d1d1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 10px;
    position: relative;
}
#sidebar {
    background: none;
    float: right;
    margin: 0 10px 0;
    padding: 10px;
    width: 300px;
    transition: 500ms right;
	border: 1px solid grey;
	min-height: 300px;
}
.submissions-container ul {
  list-style-type: none;
}
.submissions-container ul li {
margin: 0px 0px 10px 0px;
background-color: #fff;
border: 1px solid #f4f4f4;
border-left-color: rgb(244, 244, 244);
border-left-style: solid;
border-left-width: 1px;
border-left: 4px solid #e6e6e6;
box-shadow: 0px 1px 2px rgba(0,0,0,0.03);
border-radius: 2px;
padding: 10px;
}

<div id="container">

	<div id="sidebar">
		<div class="sidebar-container">
				sidebar
		
		</div>
	</div>
	
	<div class="content">	
    <div class="submissions-container">
        <ul>
          <li>
            test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test
          </li>
          <li>
            test test test
          </li>
          <li>
            test test test
          </li>
          <li>
            test test test
          </li>	
          <li>
            test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test
          </li>
          <li>
            test test test
          </li>
          <li>
            test test test
          </li>
          <li>
            test test test
          </li>				
        </ul>
    </div>
		
	</div>
	

</div>

Answer 1

添加溢出：自动；对您的ul> li来说有用了

#container {
    background: #f8f8f8;
    border: 1px solid #d1d1d1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 10px;
    position: relative;
}
#sidebar {
    background: none;
    float: right;
    margin: 0 10px 0;
    padding: 10px;
    width: 300px;
    transition: 500ms right;
	border: 1px solid grey;
	min-height: 300px;
}
.submissions-container ul {
  list-style-type: none;
}
.submissions-container ul li {
margin: 0px 0px 10px 0px;
background-color: #fff;
border: 1px solid #f4f4f4;
border-left-color: rgb(244, 244, 244);
border-left-style: solid;
border-left-width: 1px;
border-left: 4px solid #e6e6e6;
box-shadow: 0px 1px 2px rgba(0,0,0,0.03);
border-radius: 2px;
padding: 10px;
overflow: auto;
}

<div id="container">

	<div id="sidebar">
		<div class="sidebar-container">
				sidebar
		
		</div>
	</div>
	
	<div class="content">	
    <div class="submissions-container">
        <ul>
          <li>
            test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test
          </li>
          <li>
            test test test
          </li>
          <li>
            test test test
          </li>
          <li>
            test test test
          </li>	
          <li>
            test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test				test test test
          </li>
          <li>
            test test test
          </li>
          <li>
            test test test
          </li>
          <li>
            test test test
          </li>				
        </ul>
    </div>
		
	</div>
	

</div>