Propriedade do CSS width, height, float e clear 
width e height
As propriedades width e height modificam a altura e largura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Com folhas de estilos podem ser usados para redimensionar a "caixa" de qualquer elemento de blo-co.
Sintaxe:
width: comprimento | auto
height: comprimento | auto
Exemplo:
<html>
<head>
<style type="text/css">
<!--
p {
width: 300px;
height: 200px;
border: 1px solid black;
background: orange;
}
-->
</style>
</head>
<body>
<p>As propriedades width e height modificam a largura e altura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Este bloco tem 300px de largura e 200px de altura</p>
</body>
</html>
Veja como fica:
float
A propriedade float permite que um bloco qualquer seja posicionado à direita ou esquerda da janela do browser, fazendo com que o texto restante flua em sua volta. Permite que qualquer bloco se comporte como uma imagem que faz uso dos atributos align=left e a-lign=right no HTML.
Sintaxe:
float: left | right | none
Exemplo:
<html>
<head>
<style type="text/css">
<!--
p {
width: 300px;
height: 200px;
border: 1px solid black;
background: orange;
float:right;
}
h3 {
width: 300px;
height: 200px;
border: 1px solid black;
background: green;
float: left;
-->
</style>
</head>
<body>
<p>As propriedades width e height modificam a largura e altura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Este bloco tem 300px de largura e 200px de altura</p>
<h3>As propriedades width e height modificam a largura e altura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Este bloco tem 300px de largura e 200px de altura</h3>
</body>
</html>
As propriedades width e height modificam a altura e largura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Com folhas de estilos podem ser usados para redimensionar a "caixa" de qualquer elemento de blo-co.
Sintaxe:
width: comprimento | auto
height: comprimento | auto
Exemplo:
<html>
<head>
<style type="text/css">
<!--
p {
width: 300px;
height: 200px;
border: 1px solid black;
background: orange;
}
-->
</style>
</head>
<body>
<p>As propriedades width e height modificam a largura e altura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Este bloco tem 300px de largura e 200px de altura</p>
</body>
</html>
Veja como fica:
float
A propriedade float permite que um bloco qualquer seja posicionado à direita ou esquerda da janela do browser, fazendo com que o texto restante flua em sua volta. Permite que qualquer bloco se comporte como uma imagem que faz uso dos atributos align=left e a-lign=right no HTML.
Sintaxe:
float: left | right | none
Exemplo:
<html>
<head>
<style type="text/css">
<!--
p {
width: 300px;
height: 200px;
border: 1px solid black;
background: orange;
float:right;
}
h3 {
width: 300px;
height: 200px;
border: 1px solid black;
background: green;
float: left;
-->
</style>
</head>
<body>
<p>As propriedades width e height modificam a largura e altura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Este bloco tem 300px de largura e 200px de altura</p>
<h3>As propriedades width e height modificam a largura e altura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Este bloco tem 300px de largura e 200px de altura</h3>
</body>
</html>
Veja como fica:
clear
E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco que utiliza a propriedade float, existe a propriedade clear, que deve ser atribuída a um bloco ou parágrafo que é afetado pela flutuação de um bloco. Faz a mesma coisa que o atributo clear, usado no <BR> em HTML, só que aqui ela é suportada em qualquer elemento (bloco ou não).
clear: none | left | right | both
Primeiro parágrafo flui ao lado da imagem.
Primeiro parágrafo flui ao lado da imagem.
Outro parágrafo que não devia fluir.
Outro parágrafo que não
devia fluir (com clear).
Veja um exemplo:
<html>
<head>
<style type="text/css">
<!--
#css {
float:left;
width: 100px;
}
.texto {
clear: both;
}
-->
</style>
</head>
<body>
<div id="css">
<img src="/css1.jpg" alt="css">
</div>
<h1>Atributos do CSS Clear</h1>
<p>Para evitar que o texto se posicione no espaço livre deixado pela logo do CSS Gates basta adicionar a seguinte regra CSS Clear: both</p>
</body>
</html>
Veja como fica:
| < Anterior | Próximo > |
|---|
