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

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

Recommend

How to filter out duplicate data when inserting large amounts of data into MySQL

Table of contents 1. Discover the problem 2. Dele...

When a Linux (Ubuntu) user enters an incorrect password N times in a row to log in, the system will be automatically locked for X minutes

1. Edit the PAM configuration file sudo vim /etc/...

Detailed deployment steps for MySQL MHA high availability configuration and failover

Table of contents 1. Introduction to MHA 1. What ...

How to design MySQL statistical data tables

Table of contents Is real-time update required? M...

A brief analysis and sharing of the advantages and disadvantages of three tree structure table designs in MYSQL

Table of contents Introduction question Design 1:...

How to deploy multiple Vue projects under the same domain name using nginx and use reverse proxy

Effect There are currently 2 projects (project1, ...

How to use Nginx to solve front-end cross-domain problems

Preface When developing static pages, such as Vue...

A brief discussion on read-only and disabled attributes in forms

Read-only and disabled attributes in forms 1. Rea...

How to manage large file uploads and breakpoint resume based on js

Table of contents Preface Front-end structure Bac...

How to install MySql in CentOS 8 and allow remote connections

Download and install. First check whether there i...

WeChat applet implements login interface

The login interface of WeChat applet is implement...

JavaScript to achieve a simple page countdown

This article example shares the specific code of ...

Detailed explanation of using JavaScript WeakMap

A WeakMap object is a collection of key/value pai...

Commonly used JavaScript array methods

Table of contents 1. filter() 2. forEach() 3. som...

A brief discussion on using virtual lists to optimize tables in el-table

Table of contents Preface Solution Specific imple...