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

Incomplete solution for using input type=text value=str

I encountered a very strange problem today. Look a...

Teach you how to use MySQL8 recursive method

I have previously written an article about recurs...

Perfect solution to the problem of data being truncated when using the group concat function in Mysql5.7

The day before yesterday, I encountered a problem...

Introduction to the usage of props in Vue

Preface: In Vue, props can be used to connect ori...

HTML+CSS to create heartbeat special effects

Today we are going to create a simple heartbeat e...

CSS text alignment implementation code

When making forms, we often encounter the situati...

Two solutions for Vue package upload server refresh 404 problem

1: nginx server solution, modify the .conf config...

Several common redirection connection example codes in html

Copy code The code is as follows: window.location...

Analysis of MySQL user management operation examples

This article describes the MySQL user management ...

A brief analysis of the differences between px, rem, em, vh, and vw in CSS

Absolute length px px is the pixel value, which i...

Four data type judgment methods in JS

Table of contents 1. typeof 2. instanceof 3. Cons...

Commonplace talk about MySQL event scheduler (must read)

Overview MySQL also has its own event scheduler, ...

A brief analysis of the relationship between various Tomcat logs and the segmentation of catalina.out files

The relationship between Tomcat logs A picture is...

Linux Samba server super detailed installation and configuration (with problem solving)

Table of contents Introduction to Samba Server Sa...

Pure CSS to achieve the text description of semi-transparent effect when the mouse is placed on it (must read for novices)

The effect is as follows: Example 1 Example 2: Ta...