The float property specifies whether or not an element should float.
The clear property is used to control the behavior of floating elements.
The float Property
------------------
In its simplest use, the float property can be used to wrap text around images.
The following example specifies that an image should float to the right in container like (image have to float)
img {
float: right;
margin: 0 0 10px 10px;
}
The clear Property
------------------
The clear property is used to control the behavior of floating elements.
Elements after a floating element will flow around it. To avoid this, use the clear property.
The clear property specifies on which sides of an element floating elements are not allowed to float (DIV have NOT to float)
div {
clear: left;
}
examples
--------
In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
Without clear
div1
div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.
Using clear
div3
div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".
In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
Add a clearfix class with overflow: auto; to the containing element, to fix this problem:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
- The Flight
- The City
- The Island
- The Food
The City
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
You will learn more about web layout and responsive web pages in a later chapter.
All CSS Float Properties
-------------------------
Property Description
clear Specifies on which sides of an element where floating elements are not allowed to float
float Specifies whether or not an element should float
overflow Specifies what happens if content overflows an element's box
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area