Việc sử dụng style = “clear: both” là gì?

98

Tôi tình cờ nhìn thấy một divcái có phong cách clear:both! Việc sử dụng cleartrong là stylegì?

<div style="clear:both">

html css

— thomasbabuj
nguồn

249

clear:both làm cho phần tử giảm xuống bên dưới bất kỳ phần tử nổi nào đứng trước nó trong tài liệu.

Bạn cũng có thể sử dụng clear:lefthoặc clear:rightlàm cho nó chỉ giảm xuống bên dưới những phần tử đã được thả nổi sang trái hoặc phải.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

— RichieHindle
nguồn

2

Ngoài ra, nó làm cho div cha để phù hợp với chiều cao.

— Oleg

@Jason, lỗi bạn đề cập chỉ áp dụng cho Internet Explorer 6 trên Windows XP. Đó là một điều tốt mà chúng ta không cần phải ủng hộ nó hầu hết những ngày này.

— Yevgeniy Afanasyev

5

@YevgeniyAfanasyev, vâng, điều này là đúng. Nhận xét của tôi là từ năm 2009 khi điều đó vẫn còn được áp dụng.

— Jason

20

Chỉ để thêm vào câu trả lời của RichieHindle, hãy xem Floatutorial , hướng dẫn này sẽ hướng dẫn bạn cách hoạt động của CSS nổi và xóa.

— Paul Dixon
nguồn

1

Vào ngày 15 tháng 2 năm 2016, tôi không thể kết nối với máy chủ cho Floatutorial (kết nối bị từ chối trên cổng 80).

— dlu

3

Khi bạn sử dụng float mà không có chiều rộng, vẫn còn một số khoảng trống trong hàng đó. Để chặn không gian này, bạn có thể sử dụng clear:both;trong phần tử tiếp theo.

— imdad
nguồn