CSS - flutuante e claro
Float especifica
como um elemento deve flutuar.
VALORES DO FLOAT
Ø left- O elemento flutua à esquerda de seu contêiner
Ø right- O elemento flutua à direita de seu contêiner
Ø none- O elemento não flutua (será exibido apenas onde
ocorre no texto). Isso é padrão
Ø inherit- O elemento herda o valor float de seu pai
flutuar: direita;
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h2>Flutuar para a direita</h2>
<p>Neste exemplo, a imagem flutuará para a direita no
parágrafo e o texto no parágrafo será quebrado ao redor da imagem..</p>
<p><img src="pineapple.jpg"
alt="Pineapple"
style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante
ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a
lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. Em at libero sed nunc venenatis imperdiet sed
ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit..</p>
</body>
</html>
float: esquerda;
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h2>Flutuar para a Esquerda</h2>
<p>Neste exemplo, a imagem flutuará para a esquerda no
parágrafo e o texto no parágrafo será quebrado ao redor da imagem..</p>
<p><img src="pineapple.jpg"
alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante
ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a
lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed
ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit.</p>
</body>
</html>
sem flutuação
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<h2>Flutuar Nenhum</h2>
<p>Neste exemplo, a imagem será exibida exatamente
onde ela ocorre no texto (float: none;).</p>
<p><img src="pineapple.jpg"
alt="Pineapple" style="width:170px;height:170px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante
ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a
lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed
ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit.</p>
</body>
</html>
Flutuar um ao lado do
outro
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>
</head>
<body>
<h2>Flutuar um ao lado do outro</h2>
<p>Neste exemplo, os três divs flutuarão um ao lado do
outro.</p>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>