CSS - Display
Sabemos que o browser exibe os elementos da página de acordo com um estilo padrão interno.
Este estilo padrão foi atribuido baseando-se na utilização padrão do objeto dentro da página.
Este padrão pode ser inline(em linha) ou block (em bloco)
Na seção html deste site na página 05-Fundamentos.html foi feita esta analise.

Elementos exibidos no formato display:block (em bloco) :

		    <address>     <article>      <aside>         <blockquote>
		    <canvas>      <dd>           <div>           <dl>
		    <dt>          <fieldset>     <figcaption>    <figure>
		    <footer>      <form>         <h1>-<h6> <header>
		    <hr>          <li>           <main>          <nav>
		    <noscript>    <ol>           <output>        <p>
		    <pre>         <section>      <table>         <tfoot>
		    <ul>          <video>
Características:
   •Os elementos tipo block são feitos para serem exibidos em bloco, ou seja, ocupam de maneira exclusiva uma linha, é ele e mais ninguém na linha.
   •Cito como exemplo a tag p que, por natureza, designa um novo parágrafo e por isso, uma nova linha.
   •Portanto, ao renderizar um elemento tipo bloco na página o DOM verifica se já existe outro elemento renderizado anteriormente à esquerda na mesma linha e, se houver, este novo elemento tipo bloco será exibido na linha a seguir.
   •Sempre, após renderizar um elemento tipo bloco a exibição do próximo elemento será feito na linha a seguir, deixando o que resta à direita no parágrafo atual vazio, sem conteúdo mesmo que o próximo elemento coubesse nele.
   •A vantagem dos elementos tipo bloco é que como eles são únicos podem ser dimensionados livremente na página (largura e altura) porque não haverá ninguém concorrendo com seu espaço.

Elementos exibidos no formato display:inline ( em linha ):

			<a>         <abbr>     <acronym> <b>
			<bdo>       <big>      <br>      <button>
			<cite>      <code>     <dfn>     <em>
			<i>         <img>      <input>   <kbd>
			<label>     <map>      <object>  <q>
			<samp>      <script>   <select>  <small>
			<span>      <strong>   <sub>     <sup>
			<textarea>  <time>     <tt>      <var>
Características:
   •Os elementos tipo inline são feitos para serem exibidos em linha, ou seja, um ao lado do outro.
   •Ao renderizar um elemento inline o browser verifica se ele cabe na linha corrente, como se fosse um texto.
   •Se couber exibe nela mesma mas se não cabe será exibido na linha a seguir.
   •A desvantagem deste tipo de elemento ( em linha ) é que não é possível dimensionar os elementos no que tange a largura ou altura entre alguns aspectos porque a largura e altura depende de todos elemento da linha e se este parâmetro fosse obedecido teria que formatar os demais elementos na mesma linha o que não é possível pois ainda não foram renderizados.

Forçando exibição em linha

Para modificar o estilo de apresentação do elemento para em linha acrescentaremos o parâmetro : display:inline; no estilo do elemento
   •Tem o comportamento de linha.
   •São posicionados um ao lado do outro.
   •O elemento perde a altura e a largura, e não é possível aplicar tais configurações no elemento.
   •O elemento ganha o comportamento de palavra, texto simples.
   •Como uma palavra, há um espaços entre os elementos, o elemento recebe parâmetros de alinhamento de texto como text-align.

Forçando exibição em bloco

Para modificar o estilo de apresentação do elemento para em linha acrescentaremos o parâmetro : display:block; no estilo do elemento
   •São posicionados um a baixo do outro.
   •O elemento não perde a altura e a largura, e é possível aplicar tais opções.
   •O elemento em bloco ocupa a linha toda, não sendo possível posicionar um bloco ao lado do outro.
   •Pode-se aplicar o margin: auto; que centraliza o elemento na pagina aplicando valores na marge conforme o tamanho do elemento pai.
   •Para receber margin: auto; o elemento precisa ser um bloco e ter uma largura setada.

Note que tanto o estilo em linha como o em bloco são estilos comumente aplicados pelo html.
Contudo com a CSS podemos alterar o estilo de apresentação da tag para o que desejarmos ao invés de usar o estilo padrão do browser.

Forçando exibição em linha-bloco

Para modificar o estilo de apresentação do elemento para em linha acrescentaremos o parâmetro : display:inline-block; no estilo do elemento
   •O elemento recebe comportamento de palavra mesmo sendo bloco.
   •É possível aplicar alinhamentos de palavra como text-align nos blocos.
   •É possível aplicar largura e altura por ser bloco.

Note que o estilo em linha-bloco só é possível ser aplicado pelo style ou css.
Normalmente não é usado pelo browser.

Forçando exibição tipo Float

Para modificar o estilo de apresentação do elemento para em linha acrescentaremos o parâmetro : display:float; no estilo do elemento
   •O float coloca o elemento em um novo contexto de exibição fora do fluxo normal de exibição atual do browser.
   •Os elementos abaixo sobem assumindo a posição do elemento com float.
   •O elemento com o float esconde o elemento que assumiu sua posição no contexto anterior, porém ele não esconde o conteúdo deste elemento, de alguma forma ele mostra este conteúdo.
   •O float muda a ordem de leitura do elemento quando alinhado a direita ou a esquerda. Normalmente segue a ordem criada no HTML.
   •Se o elemento não couber ao lado do outro, ele cai ficando abaixo do outro, mantendo sempre o lado que foi setado no float. Isso também acontece quando se diminui a janela do browser.
   •O pai que envolve o elemento flutuando perde a largura e a altura. O mesmo pode ser recuperado pelo overflow:hidden.


Modificando formato da exibição do elemento-Overflow

Para modificar o estilo de apresentação do elemento para em linha acrescentaremos o parâmetro : display:overflow; no estilo do elemento
   •Ao tirar o elemento do contexto com o float, o seu pai perde o tamanho e passa a respeitar o tamanho do seu conteúdo que ficou no mesmo contexto.
   •Para forçar o elemento pai a respeitar o tamanho dos elementos que estão fora do seu contexto, utiliza-se o overflow.
   •overflow:hidden recalcula os contextos, escondendo os elementos que vazam a altura e largura definida para o pai.


Modificando formato da exibição do elemento-Clear

Para modificar o estilo de apresentação do elemento para em linha acrescentaremos o parâmetro : display:clear-both; ou display:clear-left; ou display:clear-right; no estilo do elemento
   •limpa o contexto deixando o elemento com o clear a baixo dos elementos que estão flutuando em outro contexto.