First, we learned that the principle of CSS web page layout is to display the object declaration in the HTML code in the stream layout order, and the stream layout has to talk about float floating technology, all objects in HTML are divided into two types by default: block element and inline element. Although variable elements exist, however, it is determined that the element is a block element or an inline element based on the context. For more information about block and inline elements, see here.
In fact, the float attribute of CSS is used to change the default display mode of block element objects. When the float attribute is set for a block object, it no longer occupies one row. It can be moved to the left or right.
What you need to pay attention to is that the float attribute is not as simple as you think. Instead of explaining this article, you can fully understand its working principles, we need to constantly sum up experience in practice to deal with the problems that arise. Let's use the following small example to illustrate its basic work.
Let's look at the following CSS code:
| Reference content is as follows: 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 non-floating classes. The class that leftfloat float to the left.
Let's look at the xhtml code:
| Reference content is as follows: <Div class = "left"> div left float: none </div> <Div class = "right"> div right [www.bkjia.com] </div> <Div class = "leftfloat"> div left float: left </div> <Div class = "right"> div right [www.bkjia.com] </div> <Span class = "left"> span left float: none </span> <Span class = "right"> span right </span> |
<! 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"> <head> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" /> <title> www.bkjia.com </ title> <style type = "text / css"> </ style> </ head> <body> <div class = "left"> div left float: none </ div> <div class = "right"> div right [www.52css.ocm] </ div> <div class = "leftfloat"> div left float: left </ div> <div class = "right"> div right [www.52css.ocm] </ div> <span class = "left"> span left float: none </ span> <span class = "right"> span right </ span> </ body> </ html> <br /> <center> If the effect cannot be displayed, please press Ctrl + F5 to refresh this page. More web code: <a href = 'http: //www.bkjia.com/' title = "bkjia .com "target = '_ blank'> http://www.bkjia.com/ </a> </ center>
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
