How to implement element floating and clear floating with CSS

How to implement element floating and clear floating with CSS

Basic Introduction to Floating

  • In the standard document flow, elements are divided into two types:塊級元素and行內元素. If you want some elements to have the characteristics of both block-level elements and inline elements, you can only remove these elements from the standard document flow.
  • Floating allows elements to be out of the standard document flow, allowing multiple elements to be placed in the same line, and the width and height can be set.
  • In fact, floating is achieved through the float attribute.
  • Float attribute value description table:

Property Value describe
left Sets the element to float left.
right Sets the element to float right.

Right Float Practice

  • Let's get into the practice of right floating. The practice content is as follows: set the element with class attribute value .box1 to float right.
  • Before we get into the practice of floating, let's first look at the structure of the floating elements.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

Result Plot

Why is the resulting image a border line? Because there is no content in the div tag yet, we will now set the width and height of the child div tag to 100px pixels and add a background color.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

Result Plot

  • Why are they arranged in 3 rows? Because the 3 div tags are all block-level elements.
  • Now we set the element with class attribute value .box1 to float right.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:right;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

Result Plot

Note: Now we find that the height of calss .box element has become shorter, which means that the floating element has been separated from the standard document flow and no longer occupies space. It floats to the right and stops floating when it floats to the edge of its parent element.

Left Float Practice

Let's get into the practice of left floating. The practice content is as follows: set the element with class attribute value .box1 to float left.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

Result Plot

  • Let’s first understand the principle of floating and then explain why the element with class attribute value .box2 is invisible.
  • Now I will show you two pictures of the practical results:

Results Figure A

Results Figure B

  • Through these two result pictures, we can simply understand floating as "drifting". For example:
  • Suppose class attribute value .box is a pond, and 3 child elements are all things that can float on the surface of the pond. Now we make the element with calss attribute value .box1 float on the surface of the pond, so it will no longer occupy the space in the pond.
  • Since we understand that "floating" means it must be floating on the surface of the pond, but there is no floating element within the surface of the pond, the fact that the element with class attribute value .box2 is invisible does not mean that it does not exist, but is just blocked by the element with the class attribute value .box1 . Now we set the width of the element with the class attribute value .box2 to 150px pixels.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

Result Plot

Note: It turns out that the element with the class attribute value .box2 does exist.

Next, we set calss attribute value of .box2 element to float left to see what different effects there are

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

Result Plot

  • However, the element with the class attribute value of .box2 does not float left to the edge of its parent element. Why is it behind the class attribute value of .box1 ? Because the parent element already has a floating child element, the subsequent child elements will float behind the previous floating elements.
  • Now we set the element with the class attribute value of .box3 to float left and see what different effects it has.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

Result Plot

Note: After the floating element floats, its parent element no longer wraps the floating child element within the parent element, so a black border line appears in the result image. If you don’t understand, please read the first practical content.

Set the inline element to float

  • If we set float for inline elements, the inline elements will have the characteristics of block-level elements.
  • Let's enter the practice of setting float for inline elements. The practice content is as follows: set span tag in div tag to float left.
  • Before setting the left float, let's first look at the effect of setting the width, height and background color of the span tag.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">Smile is the first belief 1</span>
    <span class="box2">Smile is the first belief 2</span>
    <span class="box3">Smile is the original belief 3</span>
  </div>
</body>
</html>

Result Plot

  • Now we find that setting the width and height of span tag to 100px pixels does not take effect because span tag is still an inline element.
  • Now we set span tag to float left, and then we will see the effect.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
        float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">Smile is the first belief 1</span>
    <span class="box2">Smile is the first belief 2</span>
    <span class="box3">Smile is the first belief</span>
  </div>
</body>
</html>

Result Plot

Note: After the inline element is set to float, it has the characteristics of a block-level element.

Set floating summary

  • Floating features include:
  • Floated elements are removed from the standard document flow and no longer take up any space in the parent element.
  • Floating elements are at a higher level than the elements in the standard document flow and will obscure the elements in the standard document flow.
  • Floated elements float to the left or right. Floated elements stop floating when they encounter the edge of the parent element.
  • A floating element will encounter an already floating element, and the latter will float to the former and then stop floating.
  • After the floating element floats, it is separated from the parent element, and the parent element no longer wraps the floating element.
  • When inline elements are set to float, they have the characteristics of block-level elements.

Why clear floats?

  • Because floating elements will affect the elements below, you will understand it by looking at the practical results diagram.
  • Subclass elements whose class attribute value is .box do not have the same effect as before floating.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clear Float</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
        
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>Clear Float</h1>
</body>
</html>

Result Plot

After the child element of the element with the class attribute value of .box floats left, it affects the layout practice of the following elements.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Floating</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>Clear Float</h1>
</body>
</html>

Result Plot

Now everyone should understand why we need to clear floats. If there are floats, we must clear them, because setting floats for the elements above will affect the layout of the elements below.

There are 3 ways to clear floats

First method

  • Set a fixed height for the parent element of the floating element so that the floating element is visually wrapped within the parent element.
  • We set a fixed height of 600px for the parent element of the floating element and see the effect.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clear Float</title>
    <style>
       .box{
         width: 600px;
         height: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>Clear Float</h1>
</body>
</html>

Result Plot

This solves the layout problem of the following elements, but I do not recommend doing so because the height is supported by the content of the child elements, not the fixed height we give.

Second method

In fact, there is also a property for clearing floats in CSS , and the property for clearing floats is called clear.

clear attribute value description table

Property Value describe
left Clears the left floating element.
right Clears the right float element.
both Clear left and right floating elements.

  • To use this clear attribute, you must create a new div element. You cannot place any content in the newly created div element. It can only do one thing, which is to clear the float and place the newly created div element behind the last float element to take effect.
  • I will not practice the attribute values ​​of clearing left and right floats one by one here. Generally, we just use the both attribute value. To clear left and right floats, why bother about whether it is left float or right float? Just clear left and ok floats.
  • Please see the results of our practice for details.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clear Float</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
         
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
       .clear{
         clear: both;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
  </div>
  <h1>Clear Float</h1>
</body>
</html>

Result Plot

Note: This is what we really want, and visually the floated element is wrapped inside the parent element.

The third way

  • To clear floats, use the overflow attribute with a value of hidden . This attribute must be set on the parent element of the floated element.
  • Let me introduce to you the attribute overflow and the attribute value hidden . It is originally intended to hide the overflowed content, but it can also clear the float.
  • The author first overflows the content and then hides the overflowing content. Let’s take a look at it together.

Code Blocks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Overflow content is hidden</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            
        }
    </style>
</head>
<body>
    <div>
        Smile is the first belief, smile is the first belief, smile is the first belief.
        Smile is the first belief, smile is the first belief, smile is the first belief.
        Smile is the first belief, smile is the first belief, smile is the first belief.
        
    </div>
</body>
</html>

Result Plot

Next, I will hide the overflowing content.

Code Blocks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Overflow content is hidden</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        Smile is the first belief, smile is the first belief, smile is the first belief.
        Smile is the first belief, smile is the first belief, smile is the first belief.
        Smile is the first belief, smile is the first belief, smile is the first belief.
        
    </div>
</body>
</html>

Result Plot

  • To clear a float, use the overflow property with a value of hidden .
  • Before clearing the floats let's take a look at the structure.

Code Blocks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clear Float</title>
    <style>
       ul{
           list-style: none;
          
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>Smile is the first belief 1</li>
        <li>Smile is the first belief 2</li>
        <li>Smile is the first belief 3</li>
        <li>Smile is the first belief 4</li>
        <li>Smile is the first belief 5</li>
        <li>Smile is the first belief 6</li>
        <li>Smile is the first belief 7</li>
        <li>Smile is the original belief 8</li>
    </ul>
</body>
</html>

Result Plot

Note: Here I haven't cleared the floating elements yet, you can clearly see that the height of ul tag is 0 .

Clearing Float Practice

Code Blocks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clear Float</title>
    <style>
       ul{
           list-style: none;
           overflow: hidden;
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>Smile is the first belief 1</li>
        <li>Smile is the first belief 2</li>
        <li>Smile is the first belief 3</li>
        <li>Smile is the first belief 4</li>
        <li>Smile is the first belief 5</li>
        <li>Smile is the first belief 6</li>
        <li>Smile is the first belief 7</li>
        <li>Smile is the original belief 8</li>
    </ul>
</body>
</html>

Result Plot

Now we can clearly see that the height of the ul tag is 23px pixels. Why do we need to use: the attribute is overflow and the attribute value hidden to clear the float? Because only li tag elements can be used in the ul tag and no other elements can be used, so it is best to use the attribute overflow and the attribute value is hidden to clear the float.

Summarize

The above is the CSS method of floating elements and clearing floats introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  How to fix the width of table in ie8 and chrome

>>:  Introduction to JavaScript Number and Math Objects

Recommend

translate(-50%,-50%) in CSS achieves horizontal and vertical centering effect

translate(-50%,-50%) attributes: Move it up and l...

Summary of the pitfalls you may not have encountered in WeChat applet development

Table of contents getApp() Define variables at th...

How to regularly clean up docker private server images

Using CI to build docker images for release has g...

JS ES6 asynchronous solution

Table of contents Initially using the callback fu...

Background image cache under IE6

CSS background image flickering bug in IE6 (backg...

The use of setState in React and the use of synchronous and asynchronous

In react, if you modify the state directly using ...

MySQL 5.7.17 installation and configuration tutorial under Linux (Ubuntu)

Preface I have installed MySQL 5.6 before. Three ...

A brief introduction to MySQL functions

Table of contents 1. Mathematical functions 2. St...

Using trap to perform environment cleanup before graceful shutdown of docker container

When a running container is terminated, how can w...

HTML background color gradient effect achieved through CSS style

Effect screenshots: Implementation code: Copy code...

How to adjust the log level of nginx in Docker

Table of contents Intro Nginx Dockerfile New conf...

Solve the problem of qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in Qt under Ubuntu 18.04

Problem Description After installing Qt5.15.0, an...

MySQL Optimization: InnoDB Optimization

Study plans are easily interrupted and difficult ...

mysql5.7.21.zip installation tutorial

The detailed installation process of mysql5.7.21 ...

MySQL uses custom functions to recursively query parent ID or child ID

background: In MySQL, if there is a limited level...