Display vs Visibility

Visibility: visible vs hidden

In this line the following item is visibility: hidden -><- items with the hidden visibility property are not shown, but still take space on the page

In this line the following item is visibility: visible ->Visible<- This is the default for all items on a web page

Display: block vs inline vs none

In this line the following item is display: block ->Block<- block display items will have their own line

In this line the following item is display: inline ->Inline<- inline display items will behave like unremarkable text.

In this line the following item is display: none ->None<- items with this property will be hidden completely, and will take no space. Objects inside this will not be initialized by the browser. Images will not be loaded until the object changes to display: inline or display: block.

Float: left and right

This block of text is float: left

This block of text is float: right

This block of text will flow around the floaters like a river. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect. This is some extra text just to see the effect.