Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

8CSS Buoyancy: Floatingand Vertical AlignmentIn Chapter 7, I presented a subset of properties that combine to define a concept known as the CSSbox model. In this chapter, I continue introducing new properties, this time focusing on two propertiesmost often misunderstood by users new to CSS design: the float and clear properties.These properties are often misunderstood because of their unique effect on the elements in a document.In this chapter I discuss:❑ The float property and how it is used to change the flow of elements in a document —for instance, to place text beside an image❑❑The clear property and how this property is used to cancel the effects of the float propertyThe vertical-align property and how this property is used to control the verticalalignment of text to create subscript or superscript text or control vertical alignment intable cellsThe next section begins the discussion of the float property.The float PropertyA simple explanation of the float property is that it is used to put content side by side. In thecoming sections, you look in depth at the float property, its idiosyncrasies, and how you can useit to lay out a web page. The following table outlines the float property and its possible values.PropertyfloatValueleft | right | noneInitial value: noneAt 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 thefloat property is applied to an element, regardless of the type of element, that element takes on the