Rắc rối với float element trong CSS

Hôm nay là lần đầu tiên mình viết bài ở đây và mình xin chia sẻ một tip nhỏ về float element trong CSS.

Khi làm web layout mình hay gặp trường hợp có một khung container chứa nhiều nội dung. Bên trong đó mình muốn hình ảnh căn sang bên trái và nội dung căn sang bên phải (như một bài báo).

<div id="container">
  <img class="thumb" src="http://www.w3.org/2008/site/images/logo-w3c-screen-lg" >
  <p class="content"> Details, content, newspaper </p>
</div>

và CSS

#container {
  border: 1px solid red;
}
img.thumb {
  float: left;
}

Như các bạn thấy đó, hình ảnh bị ra ngoài khung đỏ của container. Để tránh tình trạng này thì mình hay add thêm một element để clear sau phần content

<div id="container">
  <img class="thumb" src="http://www.w3.org/2008/site/images/logo-w3c-screen-lg" >
  <p class="content"> Details, content, newspaper </p>
  <div class="clear" style="clear:both"></div>  
</div>

Tuy vậy cách làm này có một nhược điểm là đã add thêm 1 element không liên quan đến nội dung trang web. Nếu lạm dụng nhiều thì markup sẽ xấu.

<div class="clear" style="clear:both"></div> 

Clearfix

Cách làm tốt hơn là định nghĩa một class clearfix và gán cho container

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}

<div id="container" class="clearfix">
...
</div>

Bây giờ mỗi khi muốn clear hết float element thì chỉ cần thêm class vào parent div như trên !

Cách khác: Overflow

Như được góp ý, mình nhận ra còn một cách nữa là gán overflow cho container, cụ thể là

.container {
  overflow: auto;
}

Tuy vậy bạn cần lưu ý, nếu phần chữ của div con quá dài mà không có dấu space hoặc ảnh quá to thì sẽ xuất hiện một thanh cuộn (scrollbar). Tuỳ theo yêu cầu mà chọn cách này hay cách trên mình đã giới thiệu nhé!