In traditional table la S, we apply the table Alignment Method to the layout. After the Web standard is applied to build a webpage, the float floating attribute is not in the layout.
It is a very important attribute. We often apply float to the layout of DIV elements, not only to plan the entire layout, but also to arrange some basic elements such as navigation.
Let's take a look at the basic definition of the float attribute:
The value of this attribute indicates whether or not the object is floating. When this attribute is not equal to none, the object will be regarded as a block-level object, that is, the display attribute is equal
Block. That is to say, the display feature of floating objects will be ignored.
Parameters of the float attribute:
None: the object is not floating.
Left: the object is floating on the left.
Right: The object is floating on the right.
Next we will use some tests to understand some possible situations. If the float value is none, no floating occurs, and the block element occupies one row exclusively, the next block element is displayed in the new line, as shown in figure
:
Let's take a look at the following running results:
Code to run ">
Source code to run [www.52css.com] <! Doctype html
Public "-// W3C // DTD xhtml1.0
Transitional // "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Htmlxmlns = "http://www.w3.org/1999/xhtml"> <Metahttp-equiv = "Content-Type" content = "text/html; charset = gb2312"
/> <Title> 52css </title> <Style
Type = "text/CSS"> # content_a {width: 200px; Height: 80px; Border: 1px
Solid #000; margin: 10px; Background: # CCC ;}# content_ B {width: 200px;
Height: 80px; Border: 1px solid #000; margin: 10px; Background: #999 ;}
</Style> Id = "content_a"> 52css.com this is the first Div </div> <Div
Id = "content_ B"> 52css.com this is the second Div </div> </body>
</Html>
[You can modify some code before running it to view the effect]
We float the left of the content_a application. Content_ B does not apply any float.
Code to run ">
Source code to run [www.52css.com] <! Doctype html
Public "-// W3C // DTD xhtml1.0
Transitional // "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Htmlxmlns = "http://www.w3.org/1999/xhtml"> <Metahttp-equiv = "Content-Type" content = "text/html; charset = gb2312"
/> <Title> 52css </title> <Style
Type = "text/CSS"> # content_a {width: 200px; Height: 80px; float: left;
Border: 1px solid #000; margin: 10px; Background: # CCC ;}# content_ B
{Width: 200px; Height: 80px; Border: 1px solid #000; margin: 10px;
Background: #999 ;}</style> <Divid = "content_a"> 52css.com this is the first Div that floats to the left </div>
<Divid = "content_ B"> 52css.com. This is the second Div, which is not floating. </div>
</Body> [You can modify some code before running it to view the effect]
We can see the results in IE6:
We can see the effect in FF:
In IE, after the content_a application changes to the left, content_a changes to the left, and content_ B follows its horizontal direction only.
In ff, after the content_a application floats to the left, content_ B is invisible to the horizontal container, leaving only text. This is caused by the absence of floating clearance.
Dynamic, can refer to here: http://www.52css.com/article.asp? Id = 132
(Overflow: auto;) This is the difference between IE and FF in this case. We should avoid this situation in actual layout.
Me
At the same time, the two container applications are moved to the left to see what happened.
Css xhtml xml source code to run ">
Source code to run [www.52css.com] <! Doctype
HTML public "-// W3C // DTD xhtml1.0
Transitional // "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Htmlxmlns = "http://www.w3.org/1999/xhtml"> <Metahttp-equiv = "Content-Type" content = "text/html; charset = gb2312"
/> <Title> 52css </title> <Style
Type = "text/CSS"> # content_a {width: 200px; Height: 80px; float: left;
Border: 1px solid #000; margin: 10px; Background: # CCC ;}# content_ B
{Width: 200px; Height: 80px; float: Left; Border: 1px solid #000;
Margin: 10px; Background: #999 ;}</style> <Divid = "content_a"> 52css.com this is the first Div that floats to the left </div>
<Divid = "content_ B"> 52css.com this is the second Div floating to the left </div>
</Body> [You can modify some code before running it to view the effect]
Effect in IE
Effect in FF
In IE and FF, their results are basically the same. In the layout, we can apply such methods that are compatible with IE and ff.
We float the left of the content_ B application. Content_a does not apply any float. Let's see what the effect is:
Code to run ">
Source code to run [www.52css.com] <! Doctype html
Public "-// W3C // DTD xhtml1.0
Transitional // "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Htmlxmlns = "http://www.w3.org/1999/xhtml"> <Metahttp-equiv = "Content-Type" content = "text/html; charset = gb2312"
/> <Title> 52css </title> <Style
Type = "text/CSS"> # content_a {width: 200px; Height: 80px; Border: 1px
Solid #000; margin: 10px; Background: # CCC ;}# content_ B {width: 200px;
Height: 80px; float: Left; Border: 1px solid #000; margin: 10px;
Background: #999 ;}</style> <Divid = "content_a"> 52css.com this is the first Div that is not floating </div>
<Divid = "content_ B"> 52css.com this is the second Div floating to the left </div>
</Body> [You can modify some code before running it to view the effect]
Effect in IE
Effect in FF
There is not much change in IE and ff. In ie, the floating content_ B is used to create a bilateral buy. Khan first. For ie bilateral distance from buy please refer here: http://www.52css.com/article.asp? Id = 144
What is the status of float to the left? After floating to the right, the biggest change is that in HTML, the front element is on the far right, and the back element is on the far left.
Me
Apply the float to the right of the two elements in the above Code to see the effect.
Css xhtml xml source code to run ">
Source code to run [www.52css.com] <! Doctype
HTML public "-// W3C // DTD xhtml1.0
Transitional // "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Htmlxmlns = "http://www.w3.org/1999/xhtml"> <Metahttp-equiv = "Content-Type" content = "text/html; charset = gb2312"
/> <Title> 52css </title> <Style
Type = "text/CSS"> # content_a {width: 200px; Height: 80px; float: right;
Border: 1px solid #000; margin: 10px; Background: # CCC ;}# content_ B
{Width: 200px; Height: 80px; float: Right; Border: 1px solid #000;
Margin: 10px; Background: #999 ;}</style> <Divid = "content_a"> 52css.com this is the first Div to float to the right </div>
<Divid = "content_ B"> 52css.com this is the second Div that floats to the right </div>
</Body> [You can modify some code before running it to view the effect]
Effect in IE
Effect in FF
At the same time, the float to the right of the two elements is basically consistent, but please pay attention to the direction, the second is on the left, and the first is on the right.
For other page components, the floating principle is basically the same. You need to perform more tests to gain a better understanding. Learning CSS is to do more and write more code!
