Floating Elements

7.1 The float Property

Floating elements using the float and clear properties were among the first methods for creating complex layouts in web design. Even though modern methods like Flexbox and Grid are often preferred, knowing how to use float and clear is still important for working with legacy projects or understanding CSS fundamentals.

The float Property

The float property lets an element "float" to the left or right and be wrapped by text and other elements. This property is particularly useful for creating column layouts and wrapping text around an image.

Syntax:

    
      .element {
        float: left; /* or right */
      }
    
  

Values of the float property:

• left: the element floats to the left, and subsequent elements wrap around it on the right
• right: the element floats to the right, and subsequent elements wrap around it on the left
• none: the default value, the element does not float
• inherit: inherits the value from the parent element

Example of using float:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
      </div>
    
  

7.2 The clear Property

The clear property is used to control the wrapping behavior around floating elements. It allows you to prevent an element from being wrapped by floating elements on a certain side.

Syntax:

    
      .element {
        clear: left; /* or right */
      }
    
  

Values of the clear property:

• left: the element will not be wrapped on the left
• right: the element will not be wrapped on the right
• both: the element will not be wrapped on either side
• none: the default value, the element is wrapped on both sides

Example of using clear:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>This content will not wrap around the floated elements because of the cleared element above.</p>
      </div>
    
  

Example of the "clearfix" technique:

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

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
      </div>
    
  

7.3 Pros and Cons of Using float

Pros

1. Simplicity:
   • Easy to create simple layouts using float
2. Wide browser support:
   • float is supported by all modern browsers, including older versions
3. Flexibility in layouts:
   • Ability to create various layouts, including wrapping text around images and creating multi-column layouts

Cons

1. Challenges with complex layouts:
   • float can create issues when building complex layouts, especially when vertical alignment is required
2. Issues with parent element height:
   • Parent elements might "collapse" if all their child elements are floated. This requires using techniques like clearfix to fix
3. Obsolescence:
   • Modern methods, such as Flexbox and Grid, provide more powerful and flexible ways to create layouts

Example of creating a layout using float and clear

Creating a two-column layout using float and clear.

In this example, we're setting up a two-column layout with a sidebar (.sidebar) and main content (.main). The .sidebar and .main elements float to the left, while the .footer element with clear: both; prevents wrapping.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer Content</div>
      </div>
    
  

Using float and clear remains an important tool in the web developer's toolkit, despite the emergence of more modern methods. Understanding how they work helps in maintaining and updating older projects, as well as in creating simple layouts. Modern techniques like Flexbox and Grid are often preferred for creating complex and responsive layouts, but knowing float and clear is still relevant.

1

Task

Frontend SELF EN, level 22, lesson 1

Locked

Creating a Floating Element

Creating a Floating Element

Open

1

Task

Frontend SELF EN, level 22, lesson 1

Locked

Applying the clear Property

Applying the clear Property

Open