HTML and CSS Reference
In-Depth Information
Now float it
text
h1
Now let's add the float property. The float
property can be set to either left or right. Let's
stick with right:
h2
text
p id=“amazing”
#amazing {
width: 200px;
float: right;
}
text
text
text
Now that we've floated the “amazing” paragraph,
let's step through how the browser flows it and
everything else on the page.
(1) First, the browser flow s the
elements on the page as us ual,
starting at the top of the file and
moving toward the bottom .
Not ice tha t the
blo ck elem ents ar e
pos itioned under
the floate d eleme nt.
Th at's bec ause th e
flo ated el ement i s no
lon ger par t of th e
nor mal flo w.
(3) Becaus e the fl oated pa ragraph
text
h1
ha s been r emoved f rom the normal
flo w, the b lock ele ments ar e filled in,
h2
text
lik e the pa ragraph isn't ev en there .
h2
text
p id=“amazing”
text
text
text
text
p
span
span
em
em
(4 ) But when the inline elements
are positioned, they respect the
bou ndaries of the floated element.
So they are flowed around it.
p
text
text
text
text
p
img
img
img
img
Search WWH ::




Custom Search