First of all, we understand that the principle of CSS page layout, is in accordance with the order of the object declaration in the HTML code, the flow layout to display it, and the flow layout has to say float floating technology, in the HTML of all objects, the default is divided into two types: block element, An inline element (inline element), although a mutable element is also present, it is only determined that the element is a block element or inline element with the context relationship. You can refer to this here for block elements and inline elements.
In fact, the function of the float property of CSS is to change the default display mode of block element object. Once the Block object has a float property set, it will no longer occupy one row on its own. You can float to the left or right, and you can refer to this for a detailed description of the Float property.
You need to pay attention to is that the float property is not as simple as you think, not through the text of the description, you can fully understand its working principle, we need to continue to experience in practice, to deal with the problems that arise. We use this small example to illustrate its basic work.
Let's look at the following CSS code:
. 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;
}
Left and right are classes that do not make any floats. Leftfloat the class that floats to the left.
Let's look at the XHTML code again:
<div class= "left" >div left float:none</div>
<div class= ' right ' >div right [www.webjx.ocm]</div>
<div class= "Leftfloat" >div left float:left</div>
<div class= ' right ' >div right [www.webjx.ocm]</div>
<span class= "left" >span left float:none</span>
<span class= "right" >span right</span>
We see the effect of the operation:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com</title><style type=" Text/css "><!--. 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></pead><body><div class= "left" >div left Float:none</div><div class= ' Right ' >div right [www.webjx.ocm]</div><div class= ' leftfloat ' >div left Float:left</div><div Class= ' right ' >div right [Www.webjx.ocm]</div><span class= ' left ' >span left Float:none</spaN><span class= "right" >span right</span></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
We look at (1) and (2): the container (1) has no float, occupies a whole line, and (2) squeezes to the following line. and (2) also occupies a whole line of position.
We look at (3) and (4): The container (3) declares a left float, and the container (4) floats to its right. Implements the case where the two containers are in the same row.
We look at (5) and (6): the container (5) and (6) are span elements, which are inline elements (inline element) that are naturally on the same line.
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
