Categories
CSS Web development

CSS Float Property

Float is a CSS positioning property. The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side. 

CSS Float Property

The float property can have one of the following values:

Left (the element floats to the left of its container).

Right (the element floats to the right of its container).

None (the element does not float).

CSS Float Property

Example (let an image float to the right):

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>
<h1>CSS Float Property</h1>

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

<p><img src="https://lenadesign.org/wp-content/uploads/2019/12/untitled9.gif?w=640 alt="float-property" style="width:320px;height:220px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Output:

CSS Float Property

In this example, the image will float to the right in the text, and the text in the paragraph will wrap around the image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.


The clear property can have one of the following values:

None (allows floating elements on both sides).

Left (no floating elements allowed on the left side). 

Right (no floating elements allowed on the right side). 

Both (no floating elements allowed on either the right or the left side).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.e-1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #2a9d8f;
}

.e-2 {
  border: 1px solid #e9c46a;
}

.e-3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #2a9d8f;
}

.e-4 {
  border: 1px solid #e9c46a;
  clear: left;
}
</style>
</head>
<body>

<h4>Without clear</h4>
<div class="e-1">example-1</div>
<div class="e-2">example-2 - Notice that example-2 is after example-1 in the HTML code. However, since example-1 floats to the left, the text in example-2 flows around example-1.</div>
<br><br>

<h4>With clear</h4>
<div class="e-3">example-3</div>
<div class="e-4">example-4 - Here, clear: left; moves example-4 down below the floating example-3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

Output:

Without clear
example-1
example-2 – Notice that example-2 is after example-1 in the HTML code. However, since example-1 floats to the left, the text in example-2 flows around example-1.


With clear
example-3
example-4 – Here, clear: left; moves example-4 down below the floating example-3. The value “left” clears elements floated to the left. You can also clear “right” and “both”.


You can use the CSS float property to create a homepage with a header, footer, left content, and main content:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.header, .footer {
  background-color: #2a9d8f;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #e76f51;
  color: #ffffff;
}

.menu li:hover {
  background-color: #e9c46a;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 5</li>
    </ul>
  </div>

  <div class="column content">
    <h1>Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

Output:

Header

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

Footer Text

Enjoy coding!