CSS Clear Styles Coding Example

The clear CSS property allows you to turn floating on or off on a specific side of a block level element. The syntax is clear: none | left | right | both | inherit and the values are pretty self-explanatory. This example will show you the difference between clear: right and clear: none. 

HTML Example:

The yellow box doesn't allow floating elements at its right





The lime box allows floating elements at its right



 

CSS Example:

.box { border: 2px solid red; width: 300px; height: 100px; margin: 20px }
.dummy, #clearRight, #clearNone { width: 50px; height: 50px; }

.dummy { background: red; float: right }

#clearRight { background: yellow; clear: right }
#clearNone { background: lime; clear: none }  

Result:

The yellow box doesn't allow floating elements at its right