Floating

floating

We know all html tag or element link together with bond. But by this property we can prevent that bond. So we can say –

Removes elements from the document flow and moves them to a specified edge. Other content within the parent element will wrap around floats.

Floating based on these property.

float: left / right / none

# Stacking order:

Floated elements stack up to the parent edge, then move down to the next available edge.

Take care with elements that have differing heights – the first available edge isn’t always below.


.ski {
	float: right;
}
.sled {
	float: left;
}

<article>
	<img class="img" src="img.jpg" alt="img!" />
	<img class="img" src="img.jpg" alt="img!" />
</article> 

# Clearing Floats

Clearing is necessary if:

Floated items can be taller than non-floated content.
All children are floating.

# Common float-clearing methods:

Clear with a subsequent elements

Requires sequence to stay intact – breaks if things moves
Background / border do not extend


img {
	float: left;
}

.intro {
	clear: both;
}


<div>
	<img src="img.jpg" alt="img!" />
	<p>To successfully img, simply do not fall.</p>
</div>
<div class="intro">
	<p>Whee!</p>
</div>

# Manual clearing

Requires an empty element
Might not be necessary later


.clear {
	clear: both;
}


<div>
	<img src="img.jpg" alt="ing!" />
	<p>To successfully img, simply do not fall.</p>
	<div class="clear"></div>
</div>

# The clearfix


.group:before, .group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}
.group {
	zoom: 1; /* IE6&7 */
}


<div class="group">
	<img src="img.jpg" alt="img!" />
	<p>To successfully img, simply do not fall.</p>
</div>

You May Also Like

About the Author: admin