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

Canh Nguyen viết ngày 11/10/2015

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;
}

không dùng clear với float

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> <!-- Ở đây -->
</div>

dùng clear với float

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é!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Canh Nguyen

2 bài viết.
4 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
14 2
Hôm nay lượn lờ trên mạng tìm được một hiệu ứng rất cool cho tiến trình download, upload tên là Elastic Progress. Demo có thể xem ở dưới đây (Ảnh)...
Canh Nguyen viết hơn 2 năm trước
14 2
Bài viết liên quan
White
16 9
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
16 9
White
6 3
Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko...
Toan Nguyen viết hơn 2 năm trước
6 3
White
12 0
Giới thiệu cơ bản về Styled components 1. Styled components là gì? 1.1. Phương pháp css truyền thống Trước khi nói về styled components chúng ta...
danhuynhdev viết 7 tháng trước
12 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
4 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!