Display Float
TURN INTO YOUR CLASS’ BASKET BY THE BEGINNING OF CLASS ON _________________ Name:
Date:
Period:
Display and Float CSS does so much more than just make web pages very super fancy. CSS is also used to control the layout of web pages and to position elements horizontally or vertically.
What is the display property? The display property is CSS's most important property for controlling the layout of web pages. Every element has a default display value depending on what type of element it is. The default for most elements is block or inline . A block element is often called a block-level element. An inline element is always just called an inline element. There are many different values the display property can be set to; however, the most important ones are: ■ block : Displays the element as a block; it “owns” the line, and any additional elements will be stacked beneath it. ■ inline : Displays the element (normally a text-related element of some sort), as well as additional elements, in the same line, wrapping where need be. For example, , <em> , <span> , etc. ■ inline-block : Displays separate blocks next to one another, as opposed to stacking them. ■ none : Often used to hide elements, and will take up no space. (Note: This is different from visibility , which will hide the element, but will reserve the space.)
1. In addition to styling the look and feel of elements, what other function does CSS have? 2. Which two display values are the most common? Page 1 of 3
TURN INTO YOUR CLASS’ BASKET BY THE BEGINNING OF CLASS ON _________________ 3. Which display property allows elements to line up next to each other, w rapping if necessary, often used for text-related elements ? 4. Which display property allows for the stacking of elements ? 5. Which display property allows block-level elements to be placed next to each other ? 6. Which display property takes up no space and hides its contents?
What is the float property? Another CSS property used for controlling a webpage’s layout is float . The float property is intended for wrapping text around images , and for floating content left and right on the page, e.g., sidebars. ■ left : Allows an element to “float” to the left, while still respecting any other elements already in place, e.g., pictures, sidebars, etc. ■ right : Allows an element to “float” to the right, while still respecting any other elements already in place, e.g., pictures, sidebars, etc.
7.
The float property is often used for what purpose ?
8.
Which value is assigned to the float property for the image of Sharkeisha above?
Page 2 of 3
TURN INTO YOUR CLASS’ BASKET BY THE BEGINNING OF CLASS ON _________________
What is the clear property? Sometimes, you just need to start fresh . For example, if you don’t want the footer of your page to be impacted by any floats you might have created for earlier content, you’ll need to use the clear property to do just that: the clear property “breaks” any existing float rules already specified , and allows the element to drop below.
There are three values the clear property can be set to: ■ left : Clears (drops below) any left-floating elements. ■ right : Clears (drops below) any right-floating elements. ■ both : Clears both left and right, allowing the element to drop below all floated elements. 9.
10.
What property allows you to start fresh , ending some or all float properties previously set?
Which value would clear all preceding floats , allowing you to drop below all other elements?
Page 3 of 3
