Articles
Introduction to CSS
Float-related CSS Properties

Float-related CSS Properties

This article explains float-related CSS properties.

You can learn about the uses and syntax of float and clear properties.

YouTube Video

HTML for Preview

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37            <section style="height: auto; color: black;">
38                <header><h4>float: right</h4></header>
39                <section class="sample-view">
40                    <div class="float-right">float right</div>
41                    <div class="content">
42                        <p>
43                            paragraph 1-1
44                            paragraph 1-2
45                        </p>
46                        <p>paragraph 2</p>
47                    </div>
48                    <div class="clearfix"></div>
49                </section>
50            </section>
51        </article>
52    </main>
53</body>
54</html>

Float-related CSS Properties

float and clear properties 

 1.content {
 2    width: 300px;
 3    height: 100px;
 4}
 5
 6.content p {
 7    background-color: lightblue;
 8    margin: 10px;
 9}
10
11.float-left {
12    float: left;
13    width: 150px;
14    margin-right: 20px;
15    background-color: lightblue;
16}
17
18.float-right {
19    float: right;
20    width: 150px;
21    margin-right: 20px;
22    background-color: lightblue;
23}
24
25.clearfix {
26    clear: both;
27    display: none;
28}

float is one of the CSS properties used to float an element to the left or right within its parent element, allowing other elements to wrap around it. The float property is often used to place images or box elements around text, but its use has decreased as newer layout methods like flex and grid have become mainstream.

  • In the float-left class, the float property is set to left. The applied element floats to the left side of the parent element, and the next element wraps around to the right.
  • The float-right class sets the float property to right. The applied element floats to the right side of its parent, and the following element wraps around on the left.
  • In the clearfix class, the clear property is set to both. Using this class prevents the next element from wrapping around the floated element.

How to use float

Values
  • left: Floats the element to the left, allowing other elements to wrap on the right.
  • right: Floats the element to the right, allowing other elements to wrap on the left.
  • none: This is the default value and does not float the element.
  • inherit: Inherits the float property value from the parent element.
clear Property
  • When using float, the next element may wrap around the floated element. To prevent this, the clear property is used. The values for clear are as follows:.
    • left: Avoids elements floated to the left.
    • right: Avoids elements floated to the right.
    • both: Avoids elements floated to both the left and right.
    • none: Allows elements to float around. This is the default value.

Notes

  • When using float, there can be an issue where the height of the parent element ignores the height of the floated element. To avoid this, use the clearfix technique or overflow: hidden; on the parent element.
  • In responsive design or complex layouts, float can be more difficult to handle compared to flex or grid, so the use of flex or grid is recommended.
Summary

float is an old technique for floating elements left or right, allowing text or other elements to wrap around, and it is still sometimes used for simple layouts or image wrapping. However, for creating more flexible and easier layouts, flexbox or grid is recommended.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS Properties Related to User InterfaceOverview of Responsive Design in CSS