Trong 3 từ: inline-blocklà tốt hơn.
Chặn Nội tuyến
Hạn chế duy nhất của display: inline-blockphương pháp này là trong IE7 và bên dưới một phần tử chỉ có thể được hiển thị inline-blocknếu nó đã được inlinemặc định. Điều này có nghĩa là thay vì sử dụng một <div>yếu tố, bạn phải sử dụng một <span>yếu tố. Nó thực sự không phải là một nhược điểm lớn vì về mặt ngữ nghĩa <div>là dành cho việc phân chia trang trong khi a <span>chỉ để che một khoảng của trang, do đó không có sự khác biệt lớn về ngữ nghĩa. Một lợi ích to lớn display:inline-blocklà khi các nhà phát triển khác đang duy trì mã của bạn tại một thời điểm sau đó, rõ ràng hơn những gì display:inline-blockvà text-align:right đang cố gắng thực hiện hơn là một tuyên bố float:lefthoặc float:right. Lợi ích ưa thích của tôi trong những inline-blockcách tiếp cận này là nó dễ dàng để sử dụng vertical-align: middle, line-heightvàtext-align: centerđể tập trung hoàn hảo các yếu tố, theo cách trực quan. Tôi tìm thấy một bài đăng blog tuyệt vời về cách triển khai khối nội tuyến trên nhiều trình duyệt, trên blog Mozilla . Đây là khả năng tương thích trình duyệt .
Phao nổi
Lý do sử dụng float phương pháp này không phù hợp với bố cục trang của bạn là vì thuộc tính floatCSS ban đầu chỉ nhằm mục đích bao bọc văn bản xung quanh một hình ảnh (kiểu tạp chí) và, theo thiết kế, không phù hợp nhất cho mục đích bố cục trang chung. Khi thay đổi các phần tử nổi sau này, đôi khi bạn sẽ gặp vấn đề về định vị vì chúng không nằm trong luồng trang . Một nhược điểm khác là nó thường yêu cầu một mã xóa nếu không nó có thể phá vỡ các khía cạnh của trang. Clearfix yêu cầu thêm một phần tử sau các phần tử nổi để ngăn cha mẹ của chúng sụp đổ xung quanh chúng, điều này vượt qua ranh giới ngữ nghĩa giữa phong cách tách biệt với nội dung và do đó là một mô hình chống phát triển web .
Bất kỳ vấn đề khoảng trắng nào được đề cập trong liên kết ở trên có thể dễ dàng được khắc phục bằng thuộc tính white-spaceCSS.
Biên tập:
SitePoint là một nguồn rất đáng tin cậy cho lời khuyên thiết kế web và họ dường như có cùng quan điểm với tôi:
Nếu bạn chưa quen với bố cục CSS, bạn sẽ được tha thứ vì nghĩ rằng sử dụng CSS nổi theo cách tưởng tượng là chiều cao của kỹ năng. Nếu bạn đã sử dụng nhiều hướng dẫn bố cục CSS như bạn có thể tìm thấy, bạn có thể cho rằng việc làm chủ phao là một nghi thức thông qua. Bạn sẽ bị lóa mắt bởi sự khéo léo, kinh ngạc bởi sự phức tạp và bạn sẽ có được cảm giác thành tựu khi cuối cùng bạn cũng hiểu được cách thức hoạt động của phao.
Đừng để bị lừa. Bạn đang bị tẩy não.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
Cập nhật 2015 - Flexbox là một lựa chọn tốt cho các trình duyệt hiện đại :
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Thêm thông tin
Cập nhật ngày 21 tháng 12 năm 2016
Bootstrap 4 đang loại bỏ hỗ trợ cho IE9 và do đó loại bỏ các số float từ các hàng và chuyển sang Flexbox đầy đủ.
Yêu cầu kéo # 21389
inline, khônginline-block. Nhưng cái đầu tiên có liên quan là tốt: stackoverflow.com/a/11823622/918414