Tại sao <div class="clear"></div> được sử dụng sau nhiều DIVS thả nổi trong DIV vùng chứa?

Question

Tôi đã gặp phải một số <div class="clear"></div> ở nhiều nơi, nhưng tôi không biết tại sao nó lại được thực hiện? Ai đó có thể tóm tắt cho tôi về điều này, tại sao nó được sử dụng trong css? Đây là CSS:

div.clear { 
    clear:both; 
} 

Answer 1

Chiều cao của một nguyên tố được xác định bởi yếu tố con của nó (trừ khi nó được thiết lập một cách rõ ràng). Ví dụ:

+------A------+ 
|+-----------+| 
||  B  || 
|+-----------+| 
|+-----------+| 
||  C  || 
|+-----------+| 
+-------------+ 

Độ cao của A được xác định bởi vị trí của đường viền dưới của con C.

Bây giờ, các yếu tố nổi không được tính vào chiều cao của cha mẹ, họ đang đưa ra khỏi dòng chảy thường xuyên:

+------A------+ 
+--+---------++ 
    | B | 
    +---------+ 
    +---------+ 
    | C | 
    +---------+ 

Các Yếu tố tính được thu nhỏ lên một tầm cao tối thiểu, vì hai đứa con của nó là nổi lên.

yếu tố Xoá được giới thiệu để khôi phục lại chiều cao chính xác:

+------A------+ 
| +---------+| 
| | B || 
| +---------+| 
| +---------+| 
| | C || 
| +---------+| 
|+-----D-----+| 
+-------------+ 

Yếu tố D là một yếu tố zero-chiều cao với clear thuộc tính thiết lập. Điều đó làm cho nó rơi xuống dưới các phần tử nổi (nó xóa chúng). Điều đó làm cho A có một phần tử con thường xuyên để tính toán chiều cao của nó bằng. Đó là trường hợp sử dụng điển hình nhất ít nhất.

Giải pháp thường xuyên hơn để giới thiệu các phần tử HTML bổ sung là đặt A thành overflow: hidden. Điều đó có tác dụng buộc phải tính toán chiều cao, có tác dụng tương tự như tăng chiều cao đến kích thước mong muốn. Tuy nhiên, giải pháp này có thể có hoặc không có tác dụng phụ khác.

Answer 2

Để xóa các kiểu nổi.

rõ ràng: http://www.w3.org/wiki/CSS/Properties/clear

float: http://www.w3.org/wiki/CSS/Properties/float

Answer 3

Để tổng hợp, điều đó giống như yêu cầu trình duyệt không cho phép bất kỳ thứ gì (tức là bất kỳ phần tử nào là div, span, anchor, table etc) ở bên trái hoặc bên phải phần tử trước đó. Điều này sẽ làm cho phần tử tiếp theo chuyển sang dòng tiếp theo.

Answer 4

Các vấn đề phổ biến nhất mà chúng ta gặp phải khi viết mã với bố cục dựa trên float là vùng chứa div cha không mở rộng đến chiều cao của các phần tử con nổi. Giải pháp điển hình để khắc phục điều này là bằng cách thêm một phần tử có float rõ ràng sau các phần tử nổi hoặc thêm một clearfix vào div cha.

tôi đem lại cho bạn một số hai ví dụ tốt cho sự hiểu biết tốt hơn về thanh toán bù trừ nổi: -

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

http://www.quirksmode.org/css/clearing.html

Answer 5

Tốt Giải thích bởi deceze. Nhưng <div class="clear"></div> là phương pháp cũ và không chuyên nghiệp thử sử dụng

#anyelement:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; } 

chỉ tiếp tục bổ sung các yếu tố khác mà cần phải xóa như #firstlement:after, .secondelement:after và vân vân.