The float property, like the position property, has the ability to take specific elements out of the normal flow or the page.
The float property specifies that elements should be placed on the far left or far right of a “parent” or “containing element”. All other material will then “flow” around the “floated” element.
The float property takes the following, self-explanatory keywords as input values;
leftrightnoneIn the following example, the same block of html is presented twice. In the first version, floats are used to place two red blocks on the left side, and one on the right side. A heading and paragraph text then “flow” around them.
In the second block, no floats are used, to present a comparison of what “normal flow” would like.
<main class="ex1-container float">
<div class="red-square"></div>
<div class="red-square"></div>
<div class="red-square float-right"></div>
<h2>Float example</h2>
<p>Nostrud anim velit sint minim proident labore ullamco labore occaecat eiusmod occaecat et. Eu cupidatat eu quis dolor cillum laboris dolor culpa ut amet duis cillum. Culpa proident culpa fugiat duis esse ex mollit ea occaecat. Ex consectetur excepteur dolore cillum Lorem sit quis ea proident pariatur pariatur dolore proident. Quis cupidatat Lorem id amet esse nulla consequat aliquip sint ad.</p>
</main>
<main class="ex1-container">
<div class="red-square"></div>
<div class="red-square"></div>
<div class="red-square"></div>
<h2>Float example</h2>
<p>Nostrud anim velit sint minim proident labore ullamco labore occaecat eiusmod occaecat et. Eu cupidatat eu quis dolor cillum laboris dolor culpa ut amet duis cillum. Culpa proident culpa fugiat duis esse ex mollit ea occaecat. Ex consectetur excepteur dolore cillum Lorem sit quis ea proident pariatur pariatur dolore proident. Quis cupidatat Lorem id amet esse nulla consequat aliquip sint ad.</p>
</main>
.ex1-container {
max-width: 600px;
border: 1px solid black;
padding: 1em;
text-align: justify;
}
.red-square {
width: 10%;
height: 8em;
margin: 0.25em;
background-color: #ff0000;
}
.float .red-square {
float: left;
}
.float .float-right {
float: right;
}
Nostrud anim velit sint minim proident labore ullamco labore occaecat eiusmod occaecat et. Eu cupidatat eu quis dolor cillum laboris dolor culpa ut amet duis cillum. Culpa proident culpa fugiat duis esse ex mollit ea occaecat. Ex consectetur excepteur dolore cillum Lorem sit quis ea proident pariatur pariatur dolore proident. Quis cupidatat Lorem id amet esse nulla consequat aliquip sint ad.
Nostrud anim velit sint minim proident labore ullamco labore occaecat eiusmod occaecat et. Eu cupidatat eu quis dolor cillum laboris dolor culpa ut amet duis cillum. Culpa proident culpa fugiat duis esse ex mollit ea occaecat. Ex consectetur excepteur dolore cillum Lorem sit quis ea proident pariatur pariatur dolore proident. Quis cupidatat Lorem id amet esse nulla consequat aliquip sint ad.
| [View on GitHub] | [Live Example] |
The ‘clear’ property (clear:) tells floated elements which side, if any, they cannot touch other elements inside the same parent element.
This can be used to create vertical menus, or control the flow of content with a containing element.
In the below example, the same code from the above “Example 1” was taken. However, a clear: left; was added to the paragraph element. Notice that this forces it to a new line, below the red squares, whereas, before it started between the two squares.
<main class="ex1-container float">
<div class="red-square"></div>
<div class="red-square"></div>
<div class="red-square float-right"></div>
<h2>Float example</h2>
<p>Nostrud anim velit sint minim proident labore ullamco labore occaecat eiusmod occaecat et. Eu cupidatat eu quis dolor cillum laboris dolor culpa ut amet duis cillum. Culpa proident culpa fugiat duis esse ex mollit ea occaecat. Ex consectetur excepteur dolore cillum Lorem sit quis ea proident pariatur pariatur dolore proident. Quis cupidatat Lorem id amet esse nulla consequat aliquip sint ad.</p>
</main>
<main class="ex1-container">
<div class="red-square"></div>
<div class="red-square"></div>
<div class="red-square"></div>
<h2>Float example</h2>
<p>Nostrud anim velit sint minim proident labore ullamco labore occaecat eiusmod occaecat et. Eu cupidatat eu quis dolor cillum laboris dolor culpa ut amet duis cillum. Culpa proident culpa fugiat duis esse ex mollit ea occaecat. Ex consectetur excepteur dolore cillum Lorem sit quis ea proident pariatur pariatur dolore proident. Quis cupidatat Lorem id amet esse nulla consequat aliquip sint ad.</p>
</main>
.ex1-container {
max-width: 600px;
border: 1px solid black;
padding: 1em;
text-align: justify;
}
.red-square {
width: 10%;
height: 8em;
margin: 0.25em;
background-color: #ff0000;
}
.float .red-square {
float: left;
}
.float .float-right {
float: right;
}
Nostrud anim velit sint minim proident labore ullamco labore occaecat eiusmod occaecat et. Eu cupidatat eu quis dolor cillum laboris dolor culpa ut amet duis cillum. Culpa proident culpa fugiat duis esse ex mollit ea occaecat. Ex consectetur excepteur dolore cillum Lorem sit quis ea proident pariatur pariatur dolore proident. Quis cupidatat Lorem id amet esse nulla consequat aliquip sint ad.
| [View on GitHub] | [Live Example] |
Please read;
Please also read;