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

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>