Khắc phụ lỗi "rớt hàng", khi sử dụng những thẻ có thuộc tính float và clear

Giới thiệu
Ta có đoạn mã html sau

<style type="text/css">
    .page {width: 800px; margin: 0px auto; background: white; border: 1px solid silver;}
    .left-column {float: left; width: 200px; background: #eee;}
    .right-column {float: right; width: 200px; background: #eee;}
    .center-column {margin-left: 210px; margin-right: 210px; background: #eee;}
    .entry {background: #ddd; margin-top: 10px;}
    .entry .title {display: block;}
    .entry .image {float: left; width: 100px; height: 100px; border: 1px solid silver;}
</style>
<div class="page">
    <div class="left-column">
        Nội dung cột trái
    </div>
    <div class="right-column">
        Nội dung cột phải
    </div>
    <div class="center-column">
        Nội dung cột giữa
        <div class="entry">
            <a class="title">Tiêu đề</a>
            <a class="image"><span>Hình ảnh</span></a>
            <div class="summary">Nội dung sơ lược, nội dung sơ lược</div>
        </div>
        <div class="entry">
            <a class="title">Tiêu đề</a>
            <a class="image"><span>Hình ảnh</span></a>
            <div class="summary">Nội dung sơ lược, nội dung sơ lược</div>
        </div>
    </div>
</div>

Kết quả hiển thị:

Ta mong đợi một bố cục trang có 3 cột, ở cột giữa sẽ có những thành phần entry nằm xếp lớp dọc, nhưng tiếc thay nó lại bị dồn lên và chồng chéo lên nhau. Điều này xảy ra do hiệu ứng float của class image, để khắc phục tình trạng này ta thêm một class mới là clear:

.page {width: 800px; margin: 0px auto; background: white; border: 1px solid silver;}
.left-column {float: left; width: 200px; background: #eee;}
.right-column {float: right; width: 200px; background: #eee;}
.center-column {margin-left: 210px; margin-right: 210px; background: #eee;}
.entry {background: #ddd; margin-top: 10px;}
.entry .title {display: block;}
.entry .image {float: left; width: 100px; height: 100px; border: 1px solid silver;}

.clear {clear: both}

Và thêm vào cuối những thẻ entry một thẻ <div class="clear"></div>:

<div class="entry">
    <a class="title">Tiêu đề</a>
    <a class="image"><span>Hình ảnh</span></a>
    <div class="summary">Nội dung sơ lược, nội dung sơ lược</div>
    <div class="clear"></div>
</div>

Ta sẽ được

Do hiệu quả của thuộc tính clear: both, nó đảm bảo rằng không có bất kỳ một thẻ có thuộc tính float nào được nằm cùng hàng với thẻ đang sử dụng clear. Chính vì vậy những thẻ entry sau sẽ chuyển sang dòng mới.

Việc sử dụng clear ở trên, cũng gây một chút ảnh hưởng là: nếu nội dung cột trái và phải nhiều, khiến cho chiều cao của cột trái / phải tăng lên, đến một ngưỡng bằng vị trí của thẻ clear ở cột giữa, thì tất cả nội dung nằm bên dưới thẻ clear đó sẽ bị đẩy xuống dưới:

Tạo nên một vùng trống tính từ chân cột trái cho đến vị trí thẻ clear đầu tiên, lỗi này xảy ra cũng bởi thẻ clear không muốn "chung chạ" với bất kỳ "em" float nào cả.

Cách khắc phục
Để khắc phục ta làm như sau:
Thêm một class mới là content-wrapper vào phần style

.page {width: 800px; margin: 0px auto; background: white; border: 1px solid silver;}
.left-column {float: left; width: 200px; background: #eee;}
.right-column {float: right; width: 200px; background: #eee;}
.center-column {margin-left: 210px; margin-right: 210px; background: #eee;}
.entry {background: #ddd; margin-top: 10px;}
.entry .title {display: block;}
.entry .image {float: left; width: 100px; height: 100px; border: 1px solid silver;}
.clear {clear: both;}
.content-wrapper {float: left; width: 100%;}

Chèn một thẻ với class là content-wrapper vào bên trong thẻ center-column và thẻ này phải bao hết tất cả thẻ con của center-column

<div class="center-column">
    <div class="content-wrapper">
        Nội dung cột giữa
        <div class="entry">
            ...
        </div>
        <div class="entry">
            ...
        </div>
    </div>
</div>

Ta sẽ được kết quả như mong muốn, không còn bị rơi vãi như trước nữa