Css layout series-float float_html/css_WEB-ITnose

I am going to talk about a series of layouts from the shallower to the deeper. I will first explain some basic attribute theories, and then try to explain them clearly through examples and theory. Everyone is welcome to discuss, learn and struggle together. Without further ado, let’s go to the official website to see how it explains the definition of float.

Official definition:

The float attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is. If non-replaced elements are floated, an explicit width is specified; otherwise, they are made as narrow as possible. If there is very little space for a floating element on a row, the element will jump to the next row, and this process will continue until a row has enough space.

Looking at these definitions, I seem to understand them, but when I actually use them, there are still some things I don’t understand. Now let’s summarize its official definition and summarize its characteristics:

Floating mainly changes the arrangement direction of elements and breaks away from the ordinary flow. The value range is left, right, none (not floating);

Floating does not occupy the position of the document. If it overlaps with non-floating block-level elements, the floating element will be placed at the top level;

If the specified element is floated, the element will have inner-block characteristics and the width will become as narrow as possible. It is recommended to specify a width;

After specifying the direction of the floating element, when the float An element will stop floating when it hits the border of the parent element or it will also stop floating when it hits the border of another floating element;

If a floating element is specified, subsequent non-floating block-level elements will float immediately. behind the element, and will automatically fill the width of the element;

If there is only a very small space for floating elements above a row, then the element will jump to the next row, and this process will continue until a certain row has Until there is enough space (it is too late today to be verified).

Supplementary explanation: Ordinary flow (also called standard flow) stipulates that elements are arranged sequentially from left to right and top to bottom.

Below we will verify it one by one through examples. Of course, it does not rule out that my summary may not be valid in some special circumstances, but I have not thought of it.

1. This is not a waste of time;
2. Set div1 to float to the left. You can see that it overlaps with the div2 element, and div1 is at the top level, and it is also verified that it is not occupied. In any space, the effect is the same as setting the element to absolute positioning and z-index, but it is not exactly the same. You can see that the div2 text is not covered. What an unpredictable float!

3. Remove the height and width of div1, and it will support itself according to the width of your text. If you don’t give the height and width, it can be as narrow as possible. In fact, the effect of setting the element to inner-block and not setting the height and width is the same as being self-supporting. This attribute will be introduced later. In a sense, setting elements to float is the same as inline blocks, except that floating can change the direction of the element.

4. Set the two elements div1 and div2 to float to the left. According to my summary, if the floating element touches the border of the parent element or touches the border of another floating element, it will stop floating. . div1 touches the border of the parent element container, and div2 stops floating when it touches the border of div1. If there is a problem, it should be that the div2 element is trying to cover the element of div1, but it doesn't, which proves that my conclusion is correct.

5. Set the div1 element to float to the left. According to my summary, if a floating element is specified, subsequent non-floating block-level elements will follow the floating element and will automatically The width of the padding element. In fact, the width of div2 is 100%, and div1 is floating on top of the div2 element. As mentioned above, floating elements do not occupy any space in the document.