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

HtmlCss

Html Problem Overview

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

<div style="clear:both">

Html Solutions

Solution 1 - Html

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    |
|                     |
+---------------------+

Solution 2 - Html

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

Solution 3 - Html

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.

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Loop that also accesses previous and next values

PythonLoopsIteration

Next Solution:

Firing a double click event from a WPF ListView item using MVVM

WpfMvvm

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionthomasbabujView Question on Stackoverflow
Solution 1 - HtmlRichieHindleView Answer on Stackoverflow
Solution 2 - HtmlPaul DixonView Answer on Stackoverflow
Solution 3 - HtmlimdadView Answer on Stackoverflow