as Ralph alluded to , the BEST solution, to the sample shown above, is NOT to float the P, you don't even need clear:both ( unless you have other floats previous in the code and within the same container.
so all you need to change is :
margin:0 0 20px 0;
Floats NATURALLY come BELOW any non floated element that precedes the in the mark up.
am assuming of course you want the DIVs to be side by side, but below the P. If you want them to go bellow each other ... um then why are you even floating divs too?
Do I need to add extra div's around the <p> tag and div's
well' here is the rub, CSS and its HTML are intrinsically tied, the suggestions above should solve your question, but it may or may not be applicable to your whole layout. CSS doesn't always allow a divide an conquer approach.
in any case , I hope that helped