如果您查看下面的屏幕截图，您会发现我需要清除浮动。我已经清除了页脚，但中间的其他东西搞砸了。我怎样才能让背景流动。
index.html.erb
<div class="left-side">
<h3>Songs</h3>
<ol>
<% @songs.each do |song| %>
<li><%= link_to song.title, song %><br></li>
<%=link_to '▲'.html_safe, vote_for_song_path(song), :remote => true, :method => :put %>
<%=link_to '▼'.html_safe, vote_against_song_path(song), :remote => true, :method => :put %> |
Submitted <%= time_ago_in_words(song.created_at) + " ago" %>
<span class="comments"> | <%= pluralize(song.comments.size, 'comment') %></span> | <span class="votes"><%= pluralize(song.votes.count, 'vote') %></span><br />
<%#= link_to 'Show', song, class: "button small secondary" %>
<%= link_to('Edit', edit_song_path(song), class: "button small secondary") if can? :update, song %>
<%= link_to('Destroy', song, method: :delete, data: {confirm: 'Are you sure?'}, class: "button small secondary") if can? :destroy, song %>
<% end %>
</ol>
</div>
<div class="right-side">
<%= link_to(image_tag('delorean.jpg', size: "50x50"), contact_path)%>
</div>
<br />
</div>
CSS 截图：
.right-side {
float: right;
max-width: 500px;
}
.left-side {
float: left;
max-width: 500px;
}
.replies {
background: white;
width: 350px;
border: 4px solid rgba(0,0,0,0.1);
padding: 12px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
outline: 0;
}
#layout {
padding: 10px 30px 10px 30px;
}
.authentication {
float: left;
width: 250px;
}
#notice {
color: #FF7F00;
}
#layout1 {
padding: 0 0 0 20px;
}
.logo {
padding-top: 0;
}
.footer a{
float: right;
display:block;
margin-right: 5px;
color: black;
}
.footer, ul li {
list-style-type: none;
}
.footer {
border-top: thin solid #FF7F00;
margin: 0 90px 0 90px;
white-space: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
font-style: normal;
text-align: start;
background: #f6f6ef;
clear: both;
}
hr {
border: solid #dddddd;
border-width: 1px 0 0;
clear: both;
margin: .50em 0 .20em;
height: 0;
}
.input-1 {
width: 500px;
}