CSS clear float clear:both example code

Today I will talk to you about clearing floats. Before talking about clearing floats, you need to understand what floats are. I will not give you a detailed introduction to floats here.
Floating means being out of the document flow. If it is out of the document flow, the width and height of the parent cannot be stretched by the child, so we need to understand the floating. Without further ado, let's get to the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1000px;
            margin: 0 auto;
            border: 8px solid black;
        }
        .box::after{
            content: "";
            clear: both;
            display: block;
        }
        .box .left{
            width: 50%;
            height: 300px;
            background-color: red;
            float: left;
        }
        .box .right{
            width: 50%;
            height: 300px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

insert image description here

From here we can see that when we use floating, the width and height of the parent cannot be stretched by the child, so the layout will be different from what you imagined. There are many solutions here.

The first one:

Add a div to the parent element and clear the float for the added div

 <div class="clear"></div>
   clear{
            clear: both;
        }

Second type:

We can set the height of the parent div, which is also possible.

 .box{
            width: 1000px;
            height: 300px;
            margin: 0 auto;
            border: 8px solid black;
        }

The third

We can add overflow:hidden; attribute to the parent, which will also work.

.box{
            overflow: hidden;
            width: 1000px;
            margin: 0 auto;
            border: 8px solid black;
        }

The fourth

We can use position: absolute or display: inline-block to clear floating.

.box{
            /* position: absolute; */
            display: inline-block;
            width: 1000px;
            margin: 0 auto;
            border: 8px solid black;
        }

In fact, it is enough to know the other four types, but you must know how to use the fifth type. The other four types can clear floating elements, but they will bring unnecessary trouble. Take the second type as an example. If the parent needs to add child elements later, we also have to modify the height of the parent, which will cause a lot of trouble. The fifth type is also the most practical one.

The fifth

Use pseudo elements to clear floats. We can add pseudo elements to the parent.

.box::after{
            content: "";
            clear: both;
            display: block;
        }

This is the end of this article about the example code of CSS clear float clear:both. For more related CSS clear both clearing floating content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: JS uses clip-path to implement dynamic area clipping function

>>: Linux system AutoFs automatic mount service installation and configuration

Summary of practical skills commonly used in Vue projects

CSS clear float clear:both example code

Summary of practical skills commonly used in Vue projects

Kill a bunch of MySQL databases with just a shell script like this (recommended)

How to use dl(dt,dd), ul(li), ol(li) in HTML

A brief discussion on the role and working principle of key in Vue3

How to change $ to # in Linux

MySQL database terminal - common operation command codes

Implementation of vue-nuxt login authentication

Summary of how to modify the root password in MySQL 5.7 and MySQL 8.0

JavaScript implements circular progress bar effect

Detailed explanation of mysql execution plan id is empty (UNION keyword)

Recommend

Implementation of MySQL's MVCC multi-version concurrency control

Pure HTML and CSS to achieve JD carousel effect

Vue realizes web online chat function

How to view MySQL links and kill abnormal links

Detailed steps to enable SourceGuardian (sg11) encryption component on Linux virtual hosts

How to expand Linux swap memory

MySQL uses the Partition function to implement horizontal partitioning strategy

A detailed explanation of the overlapping and soft color matching method in web page color matching

Example of implementing bidirectional messaging between parent and child pages in HTML iframe

Getting Started Tutorial for Newbies ⑤: Website Registration is Very Easy, Quick Registration Tips

How to install Elasticsearch7.6 cluster in docker and set password

Using Docker+jenkins+python3 environment to build a super detailed tutorial

What you need to know about creating MySQL indexes

What we have to say about CSS absolute and relative