Floating a basic explanation

Floating a basic explanation

Finally began to talk about floating. There is a lot of floating content, please be patient, I will explain it in three parts.

The first part first talks about the basic points.

Floating, the English name is float. By listening to this name, you know that elements with this function can float on a normal flow, just like a floating bottle. . .

In fact, it really is so!

The float box is generated by the dom element whose float attribute is not none. It will first appear in the normal flow, then it will leave the normal flow and drift to the left or right as much as possible according to the value of the float.

Let's first understand the float attribute.


Property name: float
Value: l eft | right | none| inherit
Initial value: none
Inheritance: None

By setting the float to left, the float box can be moved to the left. At the same time, the box on the left of the float box in the normal stream will move to the right, and it is set to right to vice versa. Of course, if it is set to none, the dom element will not be a floating element, and the resulting box will not float.

Can the float box drift freely? . .

of course not!

When actually floating, the float box needs to consider:

First priority: as high as possible

In the containing block generated by the parent element ( see Article 11 ), as long as there is enough space, the float box should be as high as possible, but how high is it? Are there any restrictions? Will it be higher than the upper edge of the containing block generated by the parent element (see Article 24) or the upper edge of any box in the ordinary stream generated before it or the upper edge of other float boxes before it?


First look at the following example (test tool: chrome 49.0).

  • Example 1: A normal float box VS the upper edge of the containing block generated by the parent element


<html>
  <head>
  <style type="text/css">	
	.parent{
		width:500px;
		height:200px;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		border:solid 2px #5CBDD2;
	}
	.float-child{
		width:100px;
		height:50px;
                float:left;
		box-sizing:border-box;
		border:solid 2px #E2D72F;
	}	
  </style>
  </head>
<body>
<div class='parent'>
  <div class='float-child'>
	float child
  </div>
</div>
</body>
</html>
 
The test results are as follows:

It can be seen that after the float box is floated under normal circumstances, the upper edge is not higher than the upper edge of the containing block generated by the parent element.

Here is an explanation of the float box under normal circumstances. In fact, the box in the ordinary stream is the box after the float is set to left or right. So what is a float box under unusual circumstances? It is actually a float box with relative positioning function. For details, please refer to here .

  • Example 2: Float box VS under normal circumstances, the upper edge of the block box generated before it
<html>
  <head>
  <style type="text/css">	
	.parent{
		width:500px;
		height:200px;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		border:solid 2px #5CBDD2;
	}
	.float-child{
		width:100px;
		height:50px;
                float:left;
		box-sizing:border-box;
		border:solid 2px #E2D72F;
	}
	.normal-child{
		width: 500px;
		height:100px;
		border:solid 2px #E881B2;
	}
	
  </style>
  </head>
<body>
<div class='parent'>
  <div class='normal-child'>
	normal block box
  </div>
  <div class='float-child'>
	float child
  </div>
</div>
</body>
</html>
 

The test results are as follows:

Obviously, the upper edge of the float box under normal circumstances is lower than the lower edge of the block box generated before it (of course, it is also lower than the upper edge of the block box). This is because in the rendering process, the block box is always on its own line, and the block box generated before the float box must be higher than the float box.

  • Example 3: The upper edge of the line box and the inline-level box generated before the float box VS under normal conditions

<html> 
  <head>
  <style type="text/css">	
	.parent{
		width:500px;
		height:auto;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		border:solid 2px #5CBDD2;
	}
	.float-child{
		width:100px;
		height:50px;
                float:left;
		box-sizing:border-box;
		border:solid 2px #E2D72F;
	}
	.normal-child{
		border:solid 2px #E881B2;
                line-height:60px;     
	}
	
  </style>
  </head>
<body>
<div class='parent'>
  <span class='normal-child'>
	normal inline box
  </span>
  <div class='float-child'>
	float child
  </div>
</div>
</body>
</html>
 

The test results are as follows:

Because the line box is a virtual concept, and there is no corresponding dom element, here I borrow the height of div . parent to compare.

div . The height of parent is set to auto, so its height should be determined by the child element. Looking at the source code, we know that it has two child elements: span element and floating element. So do we think that the height of div . parent is the height of the two child elements?

In fact, there is a special case here.

In normal flow, for block boxes generated by non- replaced elements , if the overflow attribute is visible, when calculating the height, if the child element is a floating element, the height of the child element does not participate in the height calculation process of the parent element.

In this example, I did not set the overflow of div.parent, so overflow will take its default value visible. Then the height of div . parent is only determined by the span element. The span element generates an inline box, the box will be wrapped by a line box with a height of 60px, and the line box will be wrapped by div . parent, which determines:

div . The height of the parent = the height of the line box

The height of the line box >= the height of the inline box

With this conclusion, we can compare. It is obvious from the above example that the float box and the line box are in the same row, and the upper edge of the float box is equal to the upper edge of the line box generated before it. What is the height if the float and line box are not on the same line?

Change the width of the float box from 100px to 500px, and the test results are as follows:

It can be seen that the float box will move down due to insufficient space in the previous row, and the upper edge coincides with the lower edge of the containing block, and the height is lower than the line box and inline-level box generated before it.

Combining the above two examples, we can get: Under normal circumstances, the upper edge of the float box is not higher than the upper edge of the line box and inline-level box generated before it.


  • Example 4 A normal float box VS the upper edge of the float box generated before it
<html>
  <head>
  <style type="text/css">	
	.parent{
		width:500px;
		height:100px;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		border:solid 2px #5CBDD2;
	}
	.float-child{
		width:200px;
		height:50px;
                float:left;
		box-sizing:border-box;
		border:solid 2px #E2D72F;
	}
  </style>
  </head>
<body>
<div class='parent'>
  <span class='float-child'>
      first float child 
  </span>
  <div class='float-child'>
      second float child
  </div>
</div>
</body>
</html>
 

The test results are as follows:

Obviously, the upper edge of the float box under normal circumstances is equal to the upper edge of the float box generated before it . If the width of the first float box is large enough and the remaining width is not enough to place the second float box, then the second float box will float below the first float box. It can be seen that the upper edge of the float box under normal circumstances is not higher than the upper edge of the float box generated before it.

  • Example 5 Float box with relative positioning function VS the upper edge of the containing block generated by the parent element
<html>
  <head>
  <style type="text/css">	
	.parent{
		width:500px;
		height:200px;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		border:solid 2px #5CBDD2;
	}
	.float-child{
		width:100px;
		height:50px;
                float:left;
		position:relative;
		top:-10px;
		box-sizing:border-box;
		border:solid 2px #E2D72F;
	}
	
  </style>
  </head>
<body>
<div class='parent'>
  <div class='float-child'>
	float child
  </div>
</div>
</body>
</html>
 

On the basis of Example 1, the float box is set to float 10px relative to the normal position. The test results are as follows:

Obviously, the float box will be 10px higher than the upper edge of the containing block generated by the parent element.

Therefore, if the float box is set with relative positioning, its position will float based on the value set by the developer on the basis of the normal position (that is, the position under normal circumstances), and we will not be able to generate it with the parent element. The containing block is highly compared, and similarly compared with other boxes.

Based on the above, we can draw a conclusion of Jiangzi: Under normal circumstances, the float box will float as high as possible during the floating process, but it is not higher than the upper edge of the containing block generated by the parent element and the ordinary generated before it. The upper edge of any box in the stream and the upper edge of the float box generated before it; a float box with relative positioning cannot be highly compared with other boxes, and the actual position is controlled by the developer.

2.priority: as far as possible left or right

After being as high as possible, the float box will be as far as possible to the left or right according to the float attribute value.

For a float box that floats to the left, if there is no other float box that floats to the left before, it will be as close as possible to the left edge of the containing block generated by the parent element (refer to Example 1); if there is, it will be left The edge will be next to the right edge of the previous float box (refer to Example 4). The float box floating to the right is the opposite.

The basics of the floating element are almost the same. What everyone needs to remember is that it will float to a higher place first during the floating process, and then float to the left or right as much as possible . As for other special phenomena on it, please Looking forward to explaining next time!

ps: All examples are tested on chrome.