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

Example code for implementing equal width layout in multiple ways using CSS

CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom

Blog

CSS clear float clear:both example code

Example code for implementing equal width layout in multiple ways using CSS

Form submission page refresh does not jump

Quickjs encapsulates JavaScript sandbox details

5 Ways to Clear or Delete Large File Contents in Linux

How to use port 80 in Tomcat under Linux system

Explanation of the new feature of Hadoop 2.X, the recycle bin function

Detailed steps for installing and configuring mysql 5.6.21

MySQL query optimization using custom variables

MySQL Basic Tutorial: Detailed Explanation of DML Statements

CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom

Recommend

10 minutes to thoroughly understand WeChat applet single page application routing

MySQL msi installation tutorial under windows10 with pictures and text

Introduction to RHCE bridging, password-free login and port number modification

SQL query for users who have placed orders for at least seven consecutive days

How to build a standardized vmware image for kubernetes under rancher

Interpretation and usage of various React state managers

Summary of common commands in Dockerfile

HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN

VUE implements token login verification

A brief discussion on React Component life cycle functions

How to solve mysql error 10061

MySQL 8.0.12 installation configuration method and password change

Analysis of the cause of docker error Exited (1) 4 minutes ago

Teach you how to make cool barcode effects

Beginner's guide to building a website ⑦: It's so easy to make a beautiful website