bootstrap.css: .container: trước khi bảng hiển thị

Question

Trong bootstrap.css

bạn có thể tìm thấy một trong hai từ Github hoặc từ http://twitter.github.com/bootstrap/#

Tại sao nó sử dụng:

.container:before, .container:after { 
    display: table; 
    content: ""; 
    zoom: 1; 
    } 

    .row:before, .row:after { 
    display: table; 
    content: ""; 
    zoom: 1; 
    } 

Tại sao xác định display: table in .container: trước/sau và .row: trước/sau?

Answer 1

http://nicolasgallagher.com/micro-clearfix-hack/

Các clearfix Hack là một cách phổ biến để chứa nổi mà không cần để sử dụng đánh dấu presentational. Bài viết này trình bày bản cập nhật cho phương thức clear2 làm giảm thêm lượng CSS cần thiết.

http://html5boilerplate.com/docs/The-style/#clearfix:

Thêm .clearfix đến một phần tử sẽ đảm bảo rằng nó luôn luôn đầy đủ chứa trẻ em nổi của nó. Đã có nhiều biến thể của hack clearfix trong những năm qua, và có nhiều hack khác cũng có thể giúp bạn chứa các trẻ bị lưu hành, nhưng H5BP hiện cung cấp lớp trợ giúp sửa lỗi vi mô này.

• .clearfix:before, .clearfix:after { content: ""; display: table; }
  Quy tắc này được hiểu bởi tất cả các trình duyệt trừ IE6/7. Nó tạo ra phần tử giả trước và sau nội dung của phần tử chứa phao. Đặt display: table sẽ tạo một ẩn danh table-cell và ngữ cảnh định dạng khối mới. Điều này có tác dụng ngăn chặn thu hẹp biên lợi nhuận hàng đầu và cải thiện tính nhất quán giữa các trình duyệt hiện đại và IE6/7.

• .clearfix:after { clear: both; }
  Làm cho pseudo-yếu tố :after xóa những đứa trẻ nổi của nguyên tố này, do đó làm cho các phần tử mở rộng để chứa nổi.

• .clearfix { zoom: 1; }
  Tạo bối cảnh khối định dạng mới trong IE6/7 bằng cách kích hoạt hasLayout