Chapter 8. CSS Buoyancy: Floating and Vertical Alignment
In Chapter 7, I presented a subset of properties that combine to define a concept known as the CSS box model. In this chapter, I continue introducing new properties, this time focusing on two properties most often misunderstood by users new to CSS design: the
clear properties. These properties are often misunderstood because of their unique effect on the elements in a document. In this chapter I discuss:
floatproperty and how it is used to change the flow of elements in a document — for instance, to place text beside an image
clearproperty and how this property is used to cancel the effects of the
vertical-alignproperty and how this property is used to control the vertical alignment of text to create subscript or superscript text or control vertical alignment in table cells
The next section begins the discussion of the
The float Property
A simple explanation of the
float property is that it is used to put content side by side. In the coming sections, you look in depth at the
float property, its idiosyncrasies, and how you can use it to lay out a web page. The following table outlines the
float property and its possible values.
left | right | none
Initial value: none
At this point, the
float property appears fairly simple. It accepts keyword values of
left, right, and
none. The effects of the
float property are intrinsically tied to the CSS box model. After the ...
Get Beginning CSS: Cascading Style Sheets for Web Design, Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.