CSS Clearing Floats

Question

Tôi đang cố gắng tách riêng cấu trúc html của mình khỏi bản trình bày, nhưng đôi khi tôi nhìn vào sự phức tạp của hacks hoặc cách giải quyết để làm mọi thứ hoạt động xuyên suốt trình duyệt, tôi ngạc nhiên trước tập thể khổng lồ lãng phí giờ sản xuất được đưa vào điều này.

Như tôi đã hiểu, nổi không bao giờ được tạo để tạo bố cục, nhưng vì nhiều bố cục cần chân trang, đó là cách chúng thường được sử dụng. Để xóa các float, bạn có thể thêm một div rỗng để xóa cả hai mặt (div class = "clear"). Đó là đơn giản và làm việc qua trình duyệt, nhưng nó thêm "không ngữ nghĩa" html hơn là giải quyết vấn đề trình bày trong CSS.

Tôi nhận ra điều này, nhưng sau khi xem xét tất cả các giải pháp với lợi ích và nhược điểm của nó, có vẻ hợp lý hơn khi đi với div trống (hành vi có thể dự đoán được trên các trình duyệt), thay vì tạo các bảng định kiểu riêng biệt. hacks và workarounds, vv mà cũng sẽ cần phải thay đổi khi CSS phát triển.

Có phải o.k. để làm điều này miễn là bạn hiểu những gì bạn đang làm và tại sao bạn đang làm điều đó? Hoặc là tốt hơn để tìm cách giải quyết CSS, hack và cấu trúc riêng biệt từ bản trình bày ở tất cả các chi phí, ngay cả khi các công cụ trình bày CSS được cung cấp không được phát triển đến mức chúng có thể xử lý các vấn đề bố cục cơ bản như vậy?

Answer 1

Bạn là phương pháp phù hợp. Quy tắc được tạo ra cho những người không hiểu chúng. Nếu bạn biết tất cả các ưu và contras, thực hiện cuộc gọi của riêng bạn.

Bạn đặc biệt hợp lý trong trường hợp này.CSS đã quyết định bỏ qua mong muốn chung để tách nội dung A khỏi nội dung B theo chiều ngang, vì vậy bạn phải chọn một bản hack bạn không thích nhất. Tôi so sánh ba giải pháp đã được trình bày ở đây.

• Giải pháp của bạn không tốt vì nó đã thay đổi nội dung của tài liệu, chèn phần tử C mà mục đích duy nhất là tách hình ảnh giữa A và B. Nội dung không được phục vụ mục đích bố cục.
• Giải pháp của Karpie hơi tệ hơn (trong sách của tôi) bởi vì nó cũng giống như vậy một cách tinh nghịch. Phần tử giả ": sau" không được thiết kế cho điều đó. Tuy nhiên, nó có một lợi thế lớn, không bao giờ thực sự thay đổi HTML.
• Giải pháp của PorneL đạt được sự tách biệt mong muốn giữa A và B bằng cách thay đổi triệt để các thuộc tính A. Thay đổi sẽ không chỉ tách A khỏi B, mà còn tách A khỏi nội dung trước đó, thay đổi chiều rộng của A được tính toán. Tất nhiên, đôi khi nó hoàn toàn OK, nhưng bạn phải nhận thức được những tác dụng phụ bất ngờ đó.

Lựa chọn là của chúng tôi.

Answer 2

Tôi chắc chắn không đồng ý với ý tưởng sử dụng thêm đánh dấu chỉ để xóa div.

tôi ủng hộ cách tiếp cận 'nhóm' - đưa class="group" trên div cha mẹ, với CSS sau đây:

/* Clear groups of floats by putting class="group" on their parent */ 
.group:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

Và trong một stylesheet IE-cụ thể đối với IE6/7:

/* IE7 */ 
.group 
{ 
    min-height: 1px; 
} 

/* IE6 */ 
* html .group 
{ 
    height: 1%; 
} 

Điều này đã được chi tiết trong CSS Mastery, bởi Andy Budd. Nó kéo dài ngữ nghĩa một chút, nhưng nó có ý nghĩa - bạn đang nhóm các divs nổi với nhau, mà rõ ràng là có một số mối quan hệ với nhau.

chỉnh sửa: Tôi sẽ không coi đây là một hack lớn hay cách giải quyết khác - phương pháp đã tồn tại nhiều năm trong nhiều hóa thân khác nhau, (thường được gọi là phương pháp 'clearfix') và tôi không thấy nó biến mất bất cứ lúc nào sớm.

Answer 3

Clearfix là không cần thiết hầu hết thời gian, và phiên bản phổ biến của hack là không cần thiết tiết và phức tạp.

Bạn có thể nhận hiệu ứng thanh toán bù trừ bằng cách áp dụng overflow:hidden cho vùng chứa. Nếu vùng chứa không có chiều cao cố định, nó sẽ kéo dài đến kích thước nội dung. Nó không phải là một hack, nhưng specified behavior hoạt động trong tất cả các trình duyệt.

Và khi bạn thực sự cần overflow:visible bạn vẫn có thể rõ ràng mà không cần yếu tố phụ trong lập trình:

.container::after { 
    content:""; /* not "."! */ 
    display:block; 
    clear:both; 
} 

và đó là một cách hoàn hảo chuẩn CSS 2.1. Trong các phiên bản IE không hỗ trợ CSS 2.1, hasLayout xảy ra có hiệu lực mong muốn:

.container { 
    zoom:1; 
}