清除布局浮动

Question

如果您查看下面的屏幕截图，您会看到我需要清除浮动。我已经清除了页脚，但中间的其他内容却搞乱了。如何让背景流动。

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  '&#9650'.html_safe, vote_for_song_path(song), :remote => true, :method => :put %> 
 <%=link_to '&#9660'.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;
}

Answer 1

尝试添加css属性“overflow：auto;”在您的父容器中......

希望这有帮助

干杯