span float left
<!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>