When a block level element is floated, its sizing changes from expand-to-fit, to shrink-to-fit, and is no longer subject to margin collapsing.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>float</title>
<style type='text/css'>
p.block {
    float: left;
    margin: 5px;
    background: lightyellow;
    border: 1px solid khaki;
    width: 150px;
    height: 150px;
    padding: 5px;
}
span#inline {
    float: left;
    background: khaki;
    border: 1px solid gold;
    padding: 5px;
    margin: 5px;
}
img {
    border: 1px solid rgb(244, 244, 244);
    margin: 5px;
}
img#left {
    float: left;
}
img#right {
    float: right;
}
</style>


    </head>
    <body>
        <img src='http://java2s.com/style/logo.png' alt='logo' id='left' />
        <img src='http://java2s.com/style/logo.png' alt='logo' id='right' />
        <p class='block'>
            When a block level element is floated, its sizing changes
            from expand-to-fit, to shrink-to-fit, and is no longer
            subject to margin collapsing.
        </p>
        <p>
            When an inline element is floated, it becomes a
            <span id='inline'>
                block-level element with shrink-to-fit sizing.
            </span>
        </p>
    </body>
</html>

1.	'float' Example
2.	float left
3.	float right
4.	float: left;
5.	float: left
6.	float box model
7.	float control default margin padding
8.	float extra box properties
9.	float highlighted dimensions
10.	float highlighted
11.	float inline
12.	float inline becomes block inline
13.	float inline becomes block multiline inline box model
14.	float left and right
15.	float left and right for three columns layout
16.	float left and right with other content
17.	float: left; margin-left: -700px
18.	float: left; width: 100%
19.	p float: left;
20.	When an inline element is floated, it becomes a block-level element with shrink-to-fit sizing.
21.	multiple floats
22.	Using floating elements to create columns
23.	columns floating left
24.	float: left; for right column
25.	The float property is used to force content to wrap around another element.

When a block level element is floated, its sizing changes from expand-to-fit, to shrink-to-fit, and is no longer subject to margin collapsing. : float « CSS « HTML / CSS

Related examples in the same category