Why the CSS attribute value clear:right does not work in detail

Using the clear property to clear floats is a common thing, and the definition of the clear property may be familiar to you.
For example, clear:left clears the floating element on the left. The example code is as follows:

Copy code

The code is as follows:

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>Ant Tribe</title>
<style type="text/css">
.first
{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
.second
{
width:100px;
height:100px;
border:1px solid blue;
float:left;
}
.third
{
width:100px;
height:100px;
border:1px solid green;
float:left;
clear:left;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>

From the above code, we can see that the clear:left attribute of the third div is used, and the element wraps. But it may not work when using the clear:right attribute. The example code is as follows:

Copy code

The code is as follows:

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>Ant Tribe</title>
<style type="text/css">
.first
{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
.second
{
width:100px;
height:100px;
border:1px solid blue;
float:left;
clear:right;
}
.third
{
width:100px;
height:100px;
border:1px solid green;
float:left;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>

Although the second div in the above code has the clear:right code, a floating element still appears on its right side. This main code is executed sequentially. When the second div is executed to clear the right float, the third div has not been loaded, so its clearing effect is invalid, so the third div will still follow the second div.

<<: How to solve the problem that the website does not allow direct copying of page content or information

>>: docker-maven-plugin packages the image and uploads it to a private warehouse

Introduction to the steps of deploying redis in docker container

Why the CSS attribute value clear:right does not work in detail

Introduction to the steps of deploying redis in docker container

Detailed Example of CSS3 box-shadow Property

How to set up ssh password-free login to Linux server

How to use JS to implement waterfall layout of web pages

How to modify the forgotten password when installing MySQL on Mac

Installation and configuration method of vue-route routing management

Detailed explanation of MySQL syntax, special symbols and regular expressions

Summary of all HTML interview questions

JavaScript Prototype Details

Detailed explanation of XML syntax

Recommend

Initialize Ubuntu 16.04 in three minutes, deploy Java, Maven, and Docker environments

A case study on MySQL optimization

A detailed introduction to the three installation methods of rpm, yum and source code under Linux

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border

How to block IP and IP range in Nginx

Vue button permission control introduction

How to clean up the disk space occupied by Docker

Two query methods when the MySQL query field type is json

CSS to achieve Cyberpunk 2077 style visual effects in a few steps

Reasons and solutions for failure of dynamically added routing pages in Vue when refreshing

Docker starts MySQL configuration implementation process

Detailed explanation of the installation, configuration, startup and shutdown methods of the Mysql server

Detailed explanation of MySql data type tutorial examples

Beginner's guide to building a website ⑥: Detailed usage of FlashFXP

Detailed usage of Linux text search command find