When an inline element is floated, it becomes a block-level element with shrink-to-fit sizing. : float « CSS « HTML / CSS






When an inline element is floated, it becomes a block-level element with shrink-to-fit sizing.

  
<!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>

   
    
  








Related examples in the same category

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 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.
    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.