CSS Learning note--css floating float (20171129002)

Yesterday, after solving the problem of the box model, there was a new fuzzy point of knowledge: floating and absolute positioning? To solve the problem of floating-related problems first, we first list the problems to be solved:

1. How is the float going?

2. What are the effects of floating on elements?

3. What is the main use of floating?

The first question: What is the float?

W3cschool Interpretation of floating properties: a floating box can be moved left or right until its outer edge touches the bounding box of the containing or another floating box. So the float also has left, right, none three kinds.

My personal understanding is that theHTML file is like a square sink, and that the process of loading it in a browser is a way of draining water into the sink, which represents the elements of the page, which are sequentially entering the sink (the order of the document flow is the same as we write, from top to bottom, from left to right). When an element with a floating property (float) appears, it is like a bubble in the current, which floats on the water (that is, the element is out of the flow of the document). After the flow has stopped (the page is loaded), the element will dock at the edge of the sink or dock on the other edge of the bubble (the floating element will be at the edge of the containing box or the edge of another floating element).

I was very confused about whether the floating element was out of the flow of the document, because a teacher said no while watching the instructional video, and another teacher said there was one. So I hit the code and did a little experiment:

<! DOCTYPE html>
The effect of the above code is as follows:

The red background of the DIV is set to the left floating element, according to the floating definition it should be out of the document flow, specific performance such as:
When we examine the second P tag, we find that the tag actually covers the div block, or occupies a single line, not starting from the edge of the div block. This explains:
The floating elements set are actually detached from the document stream, but the content of this element will still occupy a visual space, will not overwrite other elements or be overwritten by other elements.
2. What are the effects of floating elements on other elements?
The effect of floating elements on other elements is as shown in the example above, and the floating element will squeeze the contents of the elements behind him to the back according to the size of their content (pay special attention to what is said here!). is content! is content! ）。
Here is a special note: Some video teaching that the effect of floating only in the immediate vicinity of the elements behind it, this argument is still problematic, I have the example above to illustrate that the red div block floating affects the two P elements behind it, The extent to which the floating element affects how much of a range is determined by the size of the floating element's content. 
There are two main ways to remove the effects of floating:
The first: add attribute clear:both/right/left to elements that you do not want to be affected. The meaning of this property is not to erase anything, but to understand that the element that has this property is not allowed to exist on the left or right side of a floating element.
For example, if we add clear:left to the first p tag, then it will begin to appear below the DIV block and bring down the second P tag (as they are shown in order). And we add clear:left to the second P tag, and the first P tag is still affected by the float.
The second type: add attribute Width:100%;overflow:hidden to elements that do not want to be affected; This method is also effective.
3. What is the main use of floating?
In fact, the role of floating is very important, we can use it to achieve a very common two-column or multi-column page layout , for example:
<! DOCTYPE html>

The effect is as follows:
This is a page layout we often see, of course, my example is a bit primitive, in fact, you can change the middle part into three columns or more complex form.
Original link: http://www.cnblogs.com/laobeiV5/p/5116968.html
CSS Learning note--css floating float (20171129002)