4.7 out of 5 based on 471 ratings.
CSS Float is a positioning property in css. Float property is used to flow an element to the left or right corner of parent container and the next element wrap around it. A floating element doesn't occupy space on normal flow. Thus we have to use clear both after last floating element to avoid wrapping.
By default, all html elements are non floating.
Choose a option from radio buttons to check float property.
This is the text which can wrap around the image above if floated left or right. To now how float left, right and none works, please check a radio control below. This example will help you understand how CSS float left and right works. Float left will float image to left of parent and float right will flow image to right of parent element. After float, next element , i.e. paragraph will wrap around image.
CSS Float Left push an element to the left corner of parent element, and other elements wrap around it. A floating element doesn't occupy space in flow. Thus next non floating element will wrap around floating element.
In this example, <img> tag is left floating and paragraph after image tag is non floating. So the parapragn is wrapping around img. The content inside paragraph is showing next to image, but paragraph is wrapping around image.
Div is the common element used to build layout. Div is block level and non floating. That means, the next div will always starts in new row.
If width of div is auto, div will occupy full width, but if width of div is in px or %, still new div starts from new row as div is block level.
Float Left is used on both division here. First aside is floated left, and then section div is also floated left. After both floating elements, a blank div clear is used to stop next element wraping around floating divs.
Float Right pull an element to the top Right corner of parent element, and other elements wrap around it.
In this example, img tag is right floating and paragraph after image tag is non floating. So the parapragn is wrapping around img. The content inside paragraph is showing next to image, but paragraph is wrapping around image. Check the yellow background of p tag.
Float right is used on both division here. First aside is floated right, and then section div is also floated right. After both floating elements, a blank div clear is used to stop next element wraping around floating divs.
CSS Clear property is used to stop next element to wrap around the adjacent floating elements. Clear can have clear left, clear right or clear both values.
Without clear:both, the paragraph after floating divs will wrap around. And the next division will also wrap around, but after paragraph.
Clear: both after floating elements stop next element wrapping around.
CSS Clear Both property does not allow any element to wrap around any adjacent Floating element. Clear Left can stop wrapping around left floating element, Clear right can stop wrapping around right floating element. But Clear Both can stop wrapping around both left and right floating elements. It is compulsory to use clear both after floating elements.
Div tag is the preferred element to use clear both as div is block level.
Never use clear both on inline and inline-block elements. Prefer block level element for clear both.