Home > Developer > JavaScript
Whether the css floating box is separated from the document stream analysis, css floating
Before learning about floating attributes, let's first take a look at the display attributes in html.
Commonly used display attributes include inline, block, and inline-block.
Inline means inline. Common html tags, such as span, font, a, B, and em, are inline elements.
The so-called inline, simple understanding isElements that do not wrap.
<Body> <B> bold element </B> <a href = "http://www.google.com"> google </a> <font color = 'red'> red font </font> <span>The result is as follows:
This example is very simple. It also describes the characteristics of the inline attribute, that is, it will not wrap. The text of the four elements on the page is connected together.
Note the following.Inline elements do not support width and height attributes.. For example, the span element in the example sets the width and height, but does not work.
Block refers to block. The block element is opposite to the inline element.Automatic line feed. Common html tags, such as div, form, ul, li, p, and h1, are block elements.
<body> <form name="testForm" action=""> <input type="text" name="demo"/> </form> <div> div content </div>The result is as follows:
As you can see in the figure, the block elements are all wrapped by default.
This article does not discuss inline-block.
So what method can be used to turn block elements into restrained elements.
Yes, there are two methods.
The first type is to change the display attribute of block elements through css and change it to inline.
<Body> <div>However, because the inline attribute ignores width and height, this method is rarely used in practical use. Ignore directly!
The second is the floating attribute to be discussed in this article.
<Body> <div>
Let's take a look at the w3c description of floating. Click to view->
The specific example is already detailed in this article.
Let's look at the first sentence:
A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.
Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.
It is clear that a floating box will be reached until the outer edge of it encounters "include box" or "the border of another floating box.
Let's analyze the first w3c example:
Frame 1 is right-float, and its edge encounters a border with a width, so it stays at its position.
Let's look at the second example:
The left frame 1 is left floating, and the border containing the box is also touched. Because the floating element does not occupy space in the Document Stream, box 1 will be ignored in box 2. However, because the floating element has a high priority, box 2 is under box 1, hidden. Box 3 is a block element because it is not floating. Therefore, the line feed is automatically displayed at the bottom of box 2.
The two examples illustrate the two principles.
1. Floating elements are separated from document elements and do not occupy space. A non-floating element directly ignores this element.
2. The floating element is based on the contained box and the other floating box nearby. When it is touched, it will stop.
Note:
Let's first look at the last half of the second sentence defined in the floating box (So the block boxes in the normal stream of the document behave as if the floating boxes do not exist.)
Note that the "block box" in a normal stream is like the floating box does not exist. This refers to block boxes rather than inline elements.
For example:
#container { background-color: red; padding: 10px; height: 200px; width: 200px;}.left { float: left; width: 50px; height: 50px;}.right { float: right; width: 60px; height: 60px;}.green { background-color: green;}.blue { background-color: blue;}<body> <div id="container"> <div class="left blue"></div> <div class="right blue"></div> <span>This is inline element</span> </div></body>
The result is as follows:
We can see that. The Inline element of span does not ignore two floating elements.
We will replace the span element of the above Code with the div block box element.
The modified html code is as follows:
<Body> <div id = "container"> <div class = "left blue"> </div> <div class = "right blue"> </div> <div>Result:
Obviously, this green block box element ignores floating elements.
However, if we change the html code to the following:
<Body> <div id = "container"> <div>The result is as follows:
The result shows that the block box element occupies the 60-pixel area in the container. The two floating elements are rendered in the box area.
Does this violate w3c definition: floating boxes ignore block boxes in normal streams.
According to my personal understanding:
This may be caused by the rendering order of html. The block box is first written in the html code. As a result, the area of the block box is rendered first.
Then two floating boxes are rendered. When the floating box is rendered, the above box is rendered by the block box. The rendering starts after the block frame.
In the previous example, add one div after the last div in the container.
<div style="width: 50px; height: 60px;" class="green"></div>When rendering the last div. At this time, we found that there are already two floating boxes. At this time, we will ignore these two floating boxes and continue rendering from the first box. Then we will go to the position after the first box.
The definition of floating in w3c is a little problematic.
The last half of the second sentence should be changed:
Therefore, the block boxes in the normal stream of the document will appear after the floating box is rendered, just as the floating box does not exist.
To sum up, it seems that the floating box is not out of the Document Stream.
I do not know whether my personal understanding is correct. I hope the readers will find and point out some mistakes in this article.
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
