You are here:Home»KB»Web Design»HTML»Clearing Floats
Thursday, 13 November 2014 00:00

Clearing Floats

Written by

These are examples of hot to clear a float in different ways.

Clearing a Float with <div>

This is the standard way of clearing a float that works in all wysiwyg

<div style="clear: both;">&nbsp;</div>

Clearing a Float with <p>

This is another standard way of clearing a float that works in all wysiwyg. Sometimes it is better to use this in a wysiwyg as a <p> usually adds a gap below and above it.

<p style="clear: both;">&nbsp;</p>

 Clearing a Float with <span>

I have not really testest this. i am not sure this actually works because it is not a block element.

<span style="clear: both;"></span>  		- this seems wysiwyg (but does not clear)
<span style="clear: both;">&nbsp;</span> 	- this seems wysiwyg (but does not clear)

 Clearing a Float with <br>

a <br />  can be used to clear a float from within an <p> element (or <div>)

<br style="clear:both;" />   -  it gets removed
<br style="clear: both;">&nbsp;</br> - (tested at the end) it gets converted into <br style="clear: both;" />&nbsp;

 at the end, and note the escaped space, this prevents it from getting wiped by the wysiwyg

<li><br style="clear: both;" />&nbsp;</li>

WYSIWYG Notes

dont forget that empty tags will be removed, either give them an 'id' or put something in the tags to prevent removal

<div style="clear: both;">&nbsp;</div>
<p style="clear: both;">&nbsp;</p>
<br style="clear: both;">&nbsp;

With ID - not 100% tested
<div id="keep-me" style="clear: both;"></div>
<p id="keep-me" style="clear: both;"></p>
<br id="keep-me" style="clear: both;">
Read 1008 times Last modified on Friday, 14 November 2014 20:48