CSS float style summary, CSS float Style

CSS float style summary, CSS float Style

I started to get started with the frontend from the 4 major companies. More than half a year has passed. Although I have done some things, I feel that some points are not very clear. Sometimes, in order to catch up with the progress, you don't have much time to perform comprehensive and in-depth analysis on a specific point. You can only search and try it on the Internet. As long as the results come out, the task will be completed. This time, I finally took the time to make a detailed exploration of the float in css, which has never been very clear. I feel that this is the most confusing one in css, so I am determined to clarify it.
I first read its explanation of float from w3school and found some other materials. Finally, I personally perform one-to-one verification. Now the eyes are clear. If you don't talk much about it, we will summarize the core points below:
Two main points:The characteristics of float style elements are applied.AndIts impact on other elements
First, let's list the characteristics of floating elements to understand how they affect other elements.
(1) float left or right until it encounters a border or other floating element. Note: the floating range is within the parent element.
(2) Separation from normal document streams (in fact, it is not completely separated. It can be seen from its impact on subsequent elements (which are placed behind it in the Document Stream, it is transparent to block-level elements, non-transparent to intra-row elements, and has an impact on parent elements,
It may collapse the parent element because it cannot be felt.
Therefore, the influence of floating elements on subsequent elements can be summarized as three sentences: transparent to block elements, non-transparent to line elements, and transparent to parent elements.
    Can this impact be cleared ??
The answer is: for block-level elements, setting the clear css style in block-level elements can clear the impact on them. That is to say, block-level elements can be opaque. In this way, block-level elements
Feel the existence of the floating element.
However, clear does not work for the row element or the parent element.
Although the effects of floating elements on the row and parent elements cannot be eliminated, there are solutions:
    For in-row ElementsTo clear the impact on its parent element, because it must be within the range of the parent element.
    For the parent Element, There are two methods:

1. the block element is used to indirectly clear the impact on it. The specific method is to place an empty block-level element after all the sub-elements to clear the influence of floating on the block-level element, the block-level element is moved to the bottom of all child elements. Because the parent element can feel the block element, the parent element can no longer collapse with this block element.

2. Set the floating style for the parent element, because the floating element can feel the existence of the floating element, so it will naturally not be affected.

Further Summary: Floating elements have the effect of discontinuing from the document stream (but only for block-level elements). to clear this effect on block-level elements, you need to apply the clear style.