First, you must know two things:
1. the browser displays the object in the stream layout according to the object declaration sequence in the HTML code.
2. almost all objects in HTML are divided into two types by default: block objects and in-line objects. the default display status of a block occupies the entire row. The in-line object is the opposite, allowing other objects to be displayed in one row.
Now let's look at the float attribute. Its function is to change the default display mode of the block object. After the block object is set with the float attribute, it will no longer occupy one row.
You can see the following example:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<Style>
. Left
{
Background-color: # cccccc;
Border: 2px solid #333333;
Width: 200px;
Height: 100px;
}
. Leftfloat
{
Background-color: # cccccc;
Border: 2px solid #333333;
Width: 200px;
Height: 100px;
Float: left;
}
. Right
{
Background-color: # cccccc;
Border: 2px solid #333333;
Height: 100px;
}
</Style>
</HEAD>
<BODY>
<Div class = "left"> div left float: none </div>
<Div class = "right"> div right </div>
<Div class = "leftfloat"> div left float: left </div>
<Div class = "right"> div right </div>
<Span class = "left"> span left float: none </span>
<Span class = "right"> span right </span>
</BODY>
</HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
