float Examples

Example 1
float : left

1

2

3

4

5

6
float : left
<style type="text/css">
    .css_test_468 {
        border : 1px solid black;
    }

    .css_test_468 .dog {
        float : left;
        text-align : center;
    }
</style>

<div class="css_test_468">
    <div class="dog"><img src="http://superkts.com/img/css/dog060.gif" /><br>1</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog061.gif" /><br>2</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>3</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog060.gif" /><br>4</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog061.gif" /><br>5</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>6</div>
    <div style="clear:both;"></div>
</div>
float : left
Example 2
float : right

1

2

3

4

5

6
float : right
<style type="text/css">
    .css_test_469 {
        border : 1px solid black;
    }

    .css_test_469 .dog {
        float : right;
        text-align : center;
    }
</style>

<div class="css_test_469">
    <div class="dog"><img src="http://superkts.com/img/css/dog060.gif" /><br>1</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog061.gif" /><br>2</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>3</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog060.gif" /><br>4</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog061.gif" /><br>5</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>6</div>
    <div style="clear:both;"></div>
</div>
float : right
Example 3
float : right
float :
float : left

1

2

3

4

5

6
Example 4
float & clear : both

1

2

3

4

5

6
used - clear:both


1

2

3

4

5

6
none - clear:both
<style type="text/css">
    .css_test_471 {
        border : 1px solid black;
        padding : 5px;
    }
    .css_test_471 .dog {
        float : left;
        text-align : center;
    }
</style>

<div class="css_test_471">
    <div class="dog"><img src="http://superkts.com/img/css/dog060.gif" /><br>1</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog061.gif" /><br>2</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>3</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog060.gif" /><br>4</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog061.gif" /><br>5</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>6</div>
    <div style="clear:both;"></div>
</div>
used - clear:both
<br><br>
<div class="css_test_471">
    <div class="dog"><img src="http://superkts.com/img/css/dog060.gif" /><br>1</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog061.gif" /><br>2</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>3</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog060.gif" /><br>4</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog061.gif" /><br>5</div>
    <div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>6</div>
</div>
none - clear:both
<div style="clear:both;"></div>
Example 5
float layout tester
width :
400px
width : 400px
width :
150px
width : 150px
float :
float : left
contents
menu
<style type="text/css">
        .css_test {
                background:#efefef;
                border:2px solid #777;
                margin:0 auto;
                text-align:center;
                width:550px;
        }
 
        .css_test .content {
                background:yellow;
                float:left;
                height:300px;
                line-height:300px;
                width:400px;
        }
        .css_test .side {
                background:orange;
                float:left;
                height:300px;
                line-height:300px;
                width:150px;
        }
</style>

<div class="css_test">
        <div class="content">content</div>
        <div class="side">menu</div>
        <div class="cb"></div>
</div>
Example 6
float layout tester
width :
100px
width : 100px
width :
350px
width : 350px
width :
100px
width : 100px
float :
float : left
left
center
right

<style type="text/css">
        .css_test {
                background:#efefef;
                border:2px solid #777;
                margin:0 auto;
                text-align:center;
                width:550px;
        }
        .css_test .left {
                background:antiquewhite;
                float:left;
                height:300px;
                line-height:300px !important;
                width:100px;
                margin:0;
        }
        .css_test .center {
                background:pink;
                float:left;
                height:300px;
                line-height:300px !important;
                width:350px;
        }
        .css_test .right {
                background:bisque;
                float:left;
                height:300px;
                line-height:300px !important;
                width:100px;
        }
</style>

<div class="css_test">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
        <div class="cb"></div>
</div>

※ class="cb" is clear : both