Float and Clear

Submitted by Yorkiebar on Saturday, January 25, 2014 - 11:13.

Introduction: This is the eighth part in my CSS Styling tutorials, in which I will be covering floating. What is Float? Float is used to make an element act as a lightweight object which can fit in white space and therefore removes its aligning to center and such like. The use of float is to essentially make an element inline display with other elements which are already inline displayed or also have a float. Float can be used in places such as navigation bar links, gallery image thumbnails and columns of information. Clear: Clear is also used in conjunction with Float which can be used to specify where other floating elements are not allowed. For example; if you have three images floating left, the second image can clear right meaning the third image would be forced underneath. Structure: float: {type}; clear: {type}; Example:

float: left;

clear: right;

Values - Float: left - Floats the element to the left. right - Floats right. none - Removes all float values. inherit - Specifies that the value of the float property should be inherited from the parent element. Values - Clear: left - Clears the left side of the given element. right - Clears the right side of the given element. both - Clears both sides. none - Removes all clear values. inherit - Specifies that the value of the clear property should be inherited from the parent element. Linking CSS To a HTML Element: To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

class='myClass'

... to the attributes of that element if you chose a class, or...

id='myID'

if you chose an id. Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

.myClass {
	//Properties go here
}

if you chose a class, or...

#myID {
	//Properties go here
}

(You can remove the line beginning with // if you wish). Here's an example...

<html>
	<head>
		<style>
			.left {
				color: #000;
				width: 300px;
				height: 100px;
				float: left;
				// Floats left.
			}
			.clear {
				color: #000;
				width: 300px;
				height: 100px;
				clear: both;
				// Clears both sides to force the rest of the divs underneath.
			}
 
			.right {
				color: #000;
				width: 300px;
				height: 100px;
				float: right;
				// Floats right.
			}
 
			.none {
				color: #000;
				width: 300px;
				height: 100px;
				float: none;
				// Removes float.
			}
		</style>
	</head>
	<body>
		<div class='left'>Floating left...</div>
		<div class='clear'>Clearing...</div>
		<div class='right'>Floating right...</div>
		<div class='none'>All floats are removed.</div>
	</body>
</html>

Add new comment

48 views