float

div.test { float: none;}
div.test1 { float: left;}
div.test2 { float: right;}

Value	Description
none	Positions the element normally. This is the initial value.
left	Floats the element to the left. Subsequent elements wrap around its right side.
right	Floats the element to the right. Subsequent elements wrap around its left side.

<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px' specified.</div>
<p>This is a p element. Because the preceding element is a float, this text wraps around it. Text text text text text text text text text text text text text text text text text text.</p>

<div style="float: right; width: 200px; background-color: #ff0;">This is a div element with 'float: right' and 'width: 200px' specified.</div>
<p>This is a p element. Because the preceding element is a float, this text wraps around it. Text text text text text text text text text text text text text text text text text text.</p>

<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px' specified.</div>
<div style="float: right; width: 200px; background-color: #00ffff;">This is a div element with 'float: right' and 'width: 200px' specified.</div>

※ Version data based on MDN.

Positions an element by floating it to the left or right. Elements with a 'float' value other than 'none' are called floated elements. Floated elements are treated as block-level elements. When making an element a float, you must set the width property to a value other than 'auto'. With 'auto', the element expands to the full width of its containing block, and the expected float layout will not occur.

<div style="float: left; background-color: #ff0;">This is a div element with 'float: left' but no 'width' property, so it does not behave as a typical float.</div>
<p>This is a p element. Because the preceding element has no 'width' property, text wrapping does not occur as expected.</p>

An element with 'float: left' is placed against the left side of its containing block, and subsequent elements wrap around its right side.

<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px' specified.</div>
<p>This is a p element. Because the preceding element is a float, this text wraps around it. Text text text text text text text text text text text text text text text text text text.</p>

An element with 'float: right' is placed against the right side of its containing block, and subsequent elements wrap around its left side.

<div style="float: right; width: 200px; background-color: #ff0;">This is a div element with 'float: right' and 'width: 200px' specified.</div>
<p>This is a p element. Because the preceding element is a float, this text wraps around it. Text text text text text text text text text text text text text text text text text text.</p>

Normally, a parent element with height set to 'auto' includes the height of its children in its own height. However, floated elements are taken out of the normal document flow, so the parent cannot include a floated child's height in its own height calculation.

<p>The following places floated div elements inside a div. The parent div (red border) cannot calculate child height, so its height becomes '0'.</p>
<div style="border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px' specified.</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">This is a div element with 'float: right' and 'width: 200px' specified.</div>
</div>

To prevent this, you can: specify a height directly on the parent element; set the overflow property to a value other than 'visible'; or add a last child element with clear set to 'both', 'left', or 'right'.

<p>The following places floated div elements inside a div. 'overflow: auto' is set on the parent div (red border) to include child height.</p>
<div style="overflow: auto; border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px' specified.</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">This is a div element with 'float: right' and 'width: 200px' specified.</div>
</div>

<p>The following places floated div elements inside a div. 'clear: both' is set on the last child of the parent div (red border) to include child height.</p>
<div style="border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px' specified.</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">This is a div element with 'float: right' and 'width: 200px' specified.</div>
	<div style="background-color: #0f9; clear: both;">This is a div element with 'clear: both' specified.</div>
</div>

Another technique is clearfix — applying 'clear: both' to the ':after' pseudo-element of the parent to make the parent include the floated children's height.

/* A minimal clearfix example. Note: this only works in modern browsers. */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

<style scoped>
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
</style>

<p>The following places floated div elements inside a div. The parent div (red border) uses clearfix to include child height.</p>
	<div class="clearfix" style="border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">This is a div element with 'float: left' and 'width: 200px' specified.</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">This is a div element with 'float: right' and 'width: 200px' specified.</div>
</div>

Also note that margin collapsing never occurs on floated elements.