CODEWITHSUNDEEP
htmlcss
thomasbabuj
thomasbabuj

Reputation: 3919

What is the use of style="clear:both"?

I happened to see a div which had the style clear:both! What is the use of clear in style?

<div style="clear:both">

Upvotes: 108

Views: 118561

Answers (3)

imdad
imdad

Reputation: 31

When you use float without width, there remains some space in that row. To block this space you can use clear:both; in next element.

Upvotes: 3

RichieHindle
RichieHindle

Reputation: 281395

clear:both makes the element drop below any floated elements that precede it in the document.

You can also use clear:left or clear:right to make it drop below only those elements that have been floated left or right.

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

Upvotes: 253

Paul Dixon
Paul Dixon

Reputation: 300825

Just to add to RichieHindle's answer, check out Floatutorial, which walks you through how CSS floating and clearing works.

Upvotes: 20

Related Questions