HTML
FLOAT – Ejercicio 03_01
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>The float property</title>
<!--[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shiv.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Aaside%2C%20article%2C%20section%2C%20header%2C%20footer%2C%20nav%20%7B%0A%09display%3A%20block%3B%0A%7D%0Ahtml%2C%20body%20%7B%0A%09margin%3A%200%3B%0A%09padding%3A%200%3B%0A%7D%0Ahtml%20%7B%0A%09background%3A%20%23ccc%3B%0A%7D%0Abody%20%7B%0A%09width%3A%20600px%3B%0A%09background%3A%20%23fff%3B%0A%09margin%3A%202em%20auto%202em%3B%0A%7D%0Adiv%20%7B%0A%09margin-bottom%3A%201em%3B%0A%09width%3A%20100px%3B%0A%09height%3A%20100px%3B%0A%7D%0A%2F*add%20styles%20here*%2F%0A.element1%20%7B%0A%09background%3A%20rgb(211%2C%20206%2C%2061)%3B%0A%7D%0A.element2%20%7B%0A%09background%3A%20rgb(85%2C%2066%2C%2054)%3B%0A%7D%0A.element3%20%7B%0A%09background%3A%20rgb(247%2C120%2C37)%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
La propiedad float tiene 4 valores posibles: left | right | inherit | none
Floating an element to the left or to the right will cause it to move to the left-most or right-most edge of its parent container. Floating removes the element from normal flow, and will cause elements below it to shift accordingly.
<div class="element1"></div>
<div class="element2"></div>
<div class="element3"></div>
</body>
</html>
CLEARING – Ejercicio 03_02
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>The float property</title>
<!--[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shiv.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Aaside%2C%20article%2C%20section%2C%20header%2C%20footer%2C%20nav%20%7B%0A%09display%3A%20block%3B%0A%7D%0Ahtml%2C%20body%20%7B%0A%09margin%3A%200%3B%0A%09padding%3A%200%3B%0A%7D%0Ahtml%20%7B%0A%09background%3A%20%23ccc%3B%0A%7D%0Abody%20%7B%0A%09width%3A%20600px%3B%0A%09background%3A%20%23fff%3B%0A%09margin%3A%202em%20auto%202em%3B%0A%09font%3A%20100%25%20Arial%2C%20Helvetica%2C%20sans-serif%3B%0A%7D%0Adiv%20%7B%0A%09margin-bottom%3A%201em%3B%0A%09margin-right%3A%202em%3B%0A%09width%3A%2050px%3B%0A%09height%3A%2050px%3B%0A%09border%3A%201px%20solid%20%23000%3B%0A%09padding%3A%2025px%3B%0A%09float%3A%20left%3B%0A%7D%0A%2F*add%20styles%20here*%2F%0A.element1%20%7B%0A%09background%3A%20rgb(211%2C%20206%2C%2061)%3B%0A%7D%0A.element2%20%7B%0A%09background%3A%20rgb(85%2C%2066%2C%2054)%3B%0A%7D%0A.element3%20%7B%0A%09background%3A%20rgb(247%2C120%2C37)%3B%0A%7D%0A.element4%20%7B%0A%09background%3A%20rgb(26%2C%2078%2C%20175)%3B%0A%7D%0A.element5%20%7B%0A%09background%3A%20rgb(195%2C%20156%2C%2061)%3B%0A%7D%0A.element6%20%7B%0A%09background%3A%20rgb(225%2C68%2C37)%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
The clear property has five possible values: left | right | both | inherit | none
By clearing an element, you can ensure the element does not appear to the left or the right of any floated element. This has the result of turning a float "off" and restoring normal document flow to the remaining elements.
<div class="element1">one</div>
<div class="element2">two</div>
<div class="element3">three</div>
<div class="element4">four</div>
<div class="element5">five</div>
<div class="element6">six</div>
</body>
</html>
CONTAINING 03_03
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>containing floats</title>
<!--[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shiv.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Aaside%2C%20article%2C%20section%2C%20header%2C%20footer%2C%20nav%20%7B%0A%09display%3A%20block%3B%0A%7D%0Ahtml%2C%20body%20%7B%0A%09margin%3A%200%3B%0A%09padding%3A%200%3B%0A%7D%0Ahtml%20%7B%0A%09background%3A%20rgb(108%2C135%2C178)%3B%0A%7D%0Abody%20%7B%0A%09width%3A%20600px%3B%0A%09background%3A%20%23fff%3B%0A%09margin%3A%200%20auto%3B%0A%09font%3A%2090%25%20Georgia%2C%20%22Times%20New%20Roman%22%2C%20Times%2C%20serif%3B%0A%7D%0Adiv%20%7B%0A%09width%3A%2050px%3B%0A%09height%3A%2050px%3B%0A%09padding%3A%2050px%3B%0A%7D%0Asection%20%7B%0A%09background%3A%20rgb(178%2C155%2C107)%3B%0A%09border%3A%201px%20solid%20black%3B%0A%09padding%3A%2010px%3B%0A%7D%0A.one%20%7B%0A%09background%3A%20rgb(207%2C%20255%2C%20245)%3B%0A%7D%0A.two%20%7B%0A%09background%3A%20rgb(101%2C209%2C255)%3B%0A%7D%0A.three%20%7B%0A%09background%3A%20rgb(255%2C%20231%2C%20181)%3B%0A%7D%0A%09%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<section>
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>
</body>
</html>
CLEARFIX 03_04
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>clearfix</title>
<!--[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shiv.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Aaside%2C%20article%2C%20section%2C%20header%2C%20footer%2C%20nav%20%7B%0Adisplay%3A%20block%3B%0A%7D%0Ahtml%2C%20body%20%7B%0Amargin%3A%200%3B%0Apadding%3A%200%3B%0A%7D%0Abody%20%7B%0Awidth%3A%20600px%3B%0Amargin%3A%200%20auto%3B%0Afont%3A%2090%25%20Georgia%2C%20%22Times%20New%20Roman%22%2C%20Times%2C%20serif%3B%0A%7D%0Adiv%20%7B%0Awidth%3A%2050px%3B%0Aheight%3A%2050px%3B%0Apadding%3A%2050px%3B%0Amargin-right%3A%2025px%3B%0A%7D%0Asection%20%7B%0Abackground%3A%20rgb(178%2C155%2C107)%3B%0Aborder%3A%201px%20solid%20black%3B%0Apadding%3A%2025px%200%2025px%2050px%3B%0Amargin-top%3A%2050px%3B%0A%7D%0A.one%20%7B%0Abackground%3A%20rgb(207%2C%20255%2C%20245)%3B%0Afloat%3A%20left%3B%0A%7D%0A.two%20%7B%0Abackground%3A%20rgb(101%2C209%2C255)%3B%0Afloat%3A%20left%3B%0A%7D%0A.three%20%7B%0Abackground%3A%20rgb(255%2C%20231%2C%20181)%3B%0Afloat%3A%20left%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<section class="clearfix">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>
</body>
</html>
FLOTAR ELEMENTOS INLINE 03_05
flotar elemento inline
LAYOUT 2 COLUMNAS CON FLOATS 03_06
layout_float
- Flotar div izquierdo y al segundo div dejarle el margen del ancho del div izquierdo.
- flotar los dos divs a la izquierda
- flotar el primer div a la izquierda y el segundo a la derecha.
LAYOUT 3 COLUMNAS CON FLOATS 03_07
LAYOUT3COLS
Comentarios recientes