CSS clear float clear:both example code

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

Recommend

CSS realizes the layout method of fixed left and adaptive right

1. Floating layout 1. Let the fixed width div flo...

CSS example code for implementing sliding doors

The so-called sliding door technology means that ...

How to create a flame effect using CSS

The main text starts below. 123WORDPRESS.COM Down...

Analysis of two implementation methods for adding static routing in Linux

Command to add a route: 1.Route add route add -ne...

6 solutions to IDEA's inability to connect to the MySQL database

This article mainly introduces 6 solutions to the...

Perfect solution to Google Chrome autofill problem

In Google Chrome, after successful login, Google ...

How to get the maximum or minimum value of a row in sql

Original data and target data Implement SQL state...

Div exceeds hidden text and hides the CSS code beyond the div part

Before hiding: After hiding: CSS: Copy code The co...

Discuss the value of Web standards from four aspects with a mind map

I have roughly listed some values ​​to stimulate ...

A brief analysis of using coredump technology to trace the cause of process crashes in Linux

Recently, a problem occurred in the project. The ...

Nginx implements dynamic and static separation example explanation

In order to speed up the parsing of the website, ...

MySQL replication table details and example code

MySQL replication table detailed explanation If w...

javascript to switch by clicking on the picture

Clicking to switch pictures is very common in lif...

How to modify the time in centos virtual machine

The one above shows the system time, and the one ...

Summary of ten principles for optimizing basic statements in MySQL

Preface In the application of database, programme...