سلام،

clear: both در CSS یک property است که مشخص می‌کند یک عنصر تا چه حدی نباید تحت تأثیر floating قرار بگیرد.

وقتی یک عنصر float می‌شود، عناصر بعدی ممکن است دور آن wrap شوند. clear مشخص می‌کند که آیا عناصر می‌توانند از کنار عنصر float شده عبور کنند یا خیر.

مقادیر ممکن برای clear عبارتند از:

- right: عنصر نباید از سمت راست عناصر float شده عبور کند.

- left: عنصر نباید از سمت چپ عناصر float شده عبور کند.

- both: عنصر نباید از دو طرف عناصر float شده عبور کند.

- none: default مقدار است، عنصر می‌تواند از کنار عناصر float شده عبور کند.

بنابراین وقتی clear: both می‌گذاریم، عنصر در زیر تمام عناصر float شده قرار می‌گیرد.

در این کد clear: both دو کار انجام می‌دهد:

1. روی المان .container‌:‌
clear: both باعث می‌شود .container در زیر هر المان float شده‌ای قرار بگیرد. یعنی اگر قبل از .container المانی float شده باشد، .container آن را ignore می‌کند و زیر آن قرار می‌گیرد.

2. روی المان .row::after :‌
این pseudo element بعد از هر .row اضافه می‌شود و clear: both دارد. این کار باعث می‌شود المان بعدی .row در زیر float‌های المان‌های داخل .row قبلی قرار بگیرد.

خلاصه اینکه clear: both جلوی اثرگذاری float را می‌گیرد تا layout شکسته نشود. المان بعد از آن در زیر float قرار می‌گیرد.

این لینک1 و لینک2 را ببینید تا اثر این پراپرتی را در عمل ببینید.