CSS Layout – float and clear

CSS Layout – float and clear:

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.

Property Description
clear It specifies on which sides of an element where floating elements are not allowed to float
float It specifies whether or not an element should float
overflow It specifies what happens if content overflows an element’s box
overflow-x It specifies what to do with the left/right edges of the content if it overflows the element’s content area
overflow-y It specifies what to do with the top/bottom edges of the content if it overflows the element’s content area
Example

<!DOCTYPE html>

<html>

<head>

<style>

img

{

float: right;

margin: 0 0 12px 12px;

}

</style>

</head>

<body>

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the picture or digram or image.</p>

<p><img src=”w3css.gif” alt=”W3Schools.com” width=”110″ height=”140″> We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over hereWe can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over hereWe can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here. We can add image releted text over here</p>

</body>

</html>

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 clearproperty.

Example

<!DOCTYPE html>

<html>

<head>

<style> .div1

{

float: left;

width: 110px; height: 50px;

margin: 12px; border: 3px solid #73AD21;

}

.div2 { border: 2px solid red; }

.div3 { float: left; width: 100px; height: 50px; margin: 10px;

border: 3px solid #73AD21; }

.div4 { border: 1px solid red; clear: left; }

</style>

</head>

<body>

<h2>Without clear</h2>

<div class=”div1″>div1</div> <div class=”div2″>div2 – Notice that the div2 element is after div1, in the present 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. – Notice that the div2 element is after div1, in the present 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. – Notice that the div2 element is after div1, in the present 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.</div>

<h2>Using clear</h2>

<div class=”div3″>div3</div>

<div class=”div4″>div4 – Using clear moves div4 down just below the floated div3. The value “left” clears elements floated to the left. You can also clear “right” and “both”.</div>

</body>

</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *