CSS 標籤在float佈局中Firefox和Chrome的差異

廢話不多說，上代碼！

        <div></div>
        <hr></hr>

        <div></div>
        <hr></hr>

上樣式！！

div {
    float:left;
    width: 300px;
    height: 100px;
    background-color: red
}
hr {
    width: 100%;
    border: 1px solid #333
}

上圖片！

Chrome顯示效果

Firefox顯示效果

導致佈局錯位

解決方案

上樣式！！

div {
    float:left;
    width: 300px;
    height: 100px;
    background-color: red
}
hr {
    width: 100%;
    border: 1px solid #333;
    clear: both
}

添加clear:both，即顯示爲Chrome效果