CSS Floats

CSS floats are used to position elements on a web page so that they flow around each other. Floated elements are removed from the normal flow of the document and are placed next to each other, with any remaining space on the left or right of the floated elements.

The float Property

The float property is used to float an element. The float property can be set to one of the following values:

left: The element will float to the left of its container.
right: The element will float to the right of its container.
none: The element will not be floated.

For example, the following CSS rule will float all <div> elements to the left:

div {
  float: left;
}

Clearing Floats

When you float an element, it can cause other elements to stack up on top of each other. To prevent this, you can use the clear property. The clear property can be set to one of the following values:

left: Clears the left float.
right: Clears the right float.
both: Clears both the left and right floats.
none: Does not clear any floats.

For example, the following CSS rule will clear all floats that are to the left of the <div> element:

div {
  clear: left;
}

Other Float Properties

CSS also includes a number of other float properties, such as float-start, float-end, and clearfix. These properties can be used to control the appearance of floated elements in more detail.

For example, the following CSS rule will float all <div> elements to the start of their container:

div {
  float: float-start;
}

Task

A paragraph element with lorem ipsum text has been added to the header section. Give the header image a float property with a left value and margin-right of 20px. Run the code to see the final results and experiment with the code to get used to it.

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <style>
        body {
            line-height: 1.6;
            background-image: url(https://www.learnwebstack.com/wp-content/uploads/2023/10/19449741-scaled.jpg);
            background-size: cover;
        }
        header { 
            color: #fff;
            background-color: #333;
            font-family: 'Arial', sans-serif;
            padding: 20px;
        }
        /* Add the code below */
         
         /* Add the code above */
        ul { 
            color: #007BFF;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
            margin: 10px;
         }
        ul li {
            margin: 5px 0;
        }
        ol {
            border: 2px solid #ccc;
            padding-left: 20px;
        }
         ol li {
            font-style: italic;
         }
         header h1 { 
            font-size: 36px;
            line-height: 1.2;
        }
         h1, footer {
           text-align: center;
        }
        form {
            background-color: #f2f2f2; /* Light gray */
            border-radius: 10px;
            width: 80%;
            margin: 0 auto;
            padding: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
     </style>
</head>
<body data-rsssl=1>
    <header>
        <h1>Welcome to <i>My Portfolio<i/></h1>
        <img decoding="async" src="https://www.learnwebstack.com/wp-content/uploads/2023/09/pexels-cong-h-1404819.jpg" alt="Cat the Dev." />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purr-sollicitudin, ipsum ac varius catnip, tortor purr-tincidunt tortor, in scelerisque massa metus sit amet lectus. Phasellus auctor, tortor non varius suscipit, lorem miow bibendum ipsum, vel sodales felis arcu ac leo. Fusce id nibh purr-lacinia felis cursus suscipit. Nullam eget miow-cat amet neque volutpat condimentum. Proin in tempus metus. Nulla facilisi. Nulla miow felis, dignissim id justo vel, dictum venenatis justo.

Aenean ut ligula miow ipsum dolor sit amet meow consectetur adipiscing elit. Integer ac est ut metus bibendum fringilla. Curabitur blandit, turpis eget purr-eleifend consectetur, felis felis blandit ipsum, nec gravida tortor nisi eget ligula. Fusce metus velit, bibendum eget scelerisque a, purr-cursus quis nunc. Nulla meow felis, lacinia vitae sapien quis, venenatis cursus ipsum. Maecenas miow eu odio non purr-convallis. Meow eget nulla id nulla ultricies ultricies. Nullam non purr-sapien, ac venenatis miow. Integer eu sapien vel urna miow vestibulum. Fusce non purr-risus, eu vulputate metus.

Purr velit libero, scelerisque ut neque sed, viverra tristique justo. Maecenas metus felis, miow nec iaculis ut, dignissim ac purr-est. Aliquam erat volutpat. Aenean miow, arcu nec vestibulum venenatis, leo urna convallis purr-scelerisque. Suspendisse potenti. Suspendisse miow libero, pellentesque a purr-suscipit eget, pharetra id est. Meow eget metus quis quam tincidunt laoreet. Maecenas nec ipsum meow ipsum euismod malesuada. Sed vel ipsum sed urna gravida eleifend. Nulla eget felis eu nibh dictum imperdiet. Nulla nec semper lacus, quis vulputate purr-miow in fermentum. Ut quis purr-tortor et nunc scelerisque ultricies. Maecenas sed miow non miow volutpat elementum.
</p>
    </header>
    <section>
    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>
<section>
    <h2>Projects</h2>
    <ol>
        <li>Portfolio Website</li>
        <li>E-commerce App</li>
        <li>Blog Website</li>
    </ol>
</section>
<section>
    <h2>Education</h2>
    <table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Position</th>
        <th>Company</th>
        <th>Duration</th>
    </tr>
    <tr>
        <td>Web Developer</td>
        <td>TumkurLab</td>
        <td>2020-2022</td>
    </tr>
</table>
</section>
<section>
    <h2>Contact Me</h2>
    <form action="">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>
</section>
    <footer>
        © 2023 My Portfolio. Created by <a href="https://example.com">Your Name</a>
    </footer>
</body>

Conclusion

CSS floats are a powerful tool for positioning elements on web pages. By understanding how floats work, you can create web pages that are visually appealing and easy to use.

Here are some tips for using floats:

Use floats to create columns of text or images.
Use floats to create sidebars or other elements that flow around the main content of your page.
Use the clear property to prevent floated elements from stacking up on top of each other.
Use the float-start and float-end properties to control the alignment of floated elements.

CSS Floats

Add LearnWebstack.com to your Homescreen!