HTML and CSS Reference
In-Depth Information
Other values are allowed for the
display
property. Several are covered
in chapter 8, but one you've seen used in this appendix is
none
. In the
section on pseudo-classes, it was used to hide elements until the user
hovered over a particular area on the screen.
Now that you've learned about the box model and display modes, you
have all the prerequisite knowledge required for page layout.
Positioning and layout
In the last 10 years, most
CSS
layouts have been built around floated
elements, commonly referred to as
floats
. A floated element is one that's
outside of the normal flow of text, like a cutout. The text flows around
these floated elements as long as there's room, as illustrated by the fol-
lowing diagram.
Originally, floated elements were intended to be pictures, tables, and
figures sitting in single columns of text, but people soon figured out
that floats could be used to lay out entire pages.
Floats rely on two
CSS
properties:
float
and
clear
. The
float
property
determines which side the element floats to, whereas the
clear
property
determines how the element behaves with respect to other floated ele-
ments. Values for
float
are
left
,
right
, and
none
; values for
clear
are
left
,
right
,
both
, and
none
.