Question

I’m having some problems with float issues and them floating outside their containers.

I know that you can use clears in this issue but I don’t really understand what they do or where they should go to solve the problem.

I’ve created a clear class so I can use <br class="clear" />

Live site with the problem can be seen here:

http://www.rubytuesdaycreative.co.uk/testsite/shop.html

Answer 1

float means “Move to the side, and let content that follows this element appear beside it”

clear means “If something before me is floating, stay below it”.

You can use clear to make a container expand around its floating content — by setting clear: both on a zero height element that appears after the floating content but inside the container — but it isn’t the cleanest approach to solve that problem.

Set overflow: hidden on the container instead. This will establish a new block formatting context and cause the container to expand to contain the floated children.