CSS floating, positioning, and parent container collapse issues

How to put it, it has been three months since I came into contact with the front-end. After such a long period of study, my level is still average. I participated in IFE2017 a few days ago. Here is a summary of my understanding of floating, positioning, and Some thoughts on column layout and parent container collapse issues.

First of all, floating and positioning are the basis of layout in CSS. Through floating and positioning, each box model can be controlled accurately to the pixel level, which shows its importance.

Let’s talk about floating first:

In the document object model of HTML, a fluid layout is adopted, that is to say, block-level elements occupy a line alone, and block-level elements are arranged side by side. , there are two main methods, one is to set the display of block-level elements to inline-block in CSS. But many times it is not suitable to use this method. More often we will use the floating method.

Float, there are two main types: float: left; and float: right; floating can make block-level elements break away from the standard document flow. It can be understood that elements with float defined must move in the defined direction. Until it is blocked or hits the parent container boundary. If the remaining width of the line is insufficient, the floating box will float to the next line. Floating provides a solution for implementing page layout.

However, what cannot be ignored is that sometimes simple floating cannot meet our needs for interface layout. At this time, the importance of positioning is reflected. Positioning can be divided into four types: relative (relative positioning), absolute (absolute positioning), fixed (fixed positioning), and static. When we do not apply positioning attributes to an element, it is equivalent to static.

So, how to understand relative positioning? The element (box model) with relative positioning applied does not break away from the standard document flow. You can set the top, left, right, and bottom values ​​​​for it to achieve fine-tuning of the element (box model) relative to the original position. Top means the element relative to the original position. The position moves downward (you can set a negative value, which is equivalent to setting a positive value bottom), and left means that the element moves to the right relative to its original position. Similarly, right moves left and bottom moves up.

Absolute positioning: The element with absolute positioning applied will be separated from the document flow, as if it has never existed. At this time, its positioning is relative to its ancestor element with relative positioning applied. And it also has a very important feature: it will "cross" according to the set displacement value. What does it mean? That is to say, the top, left, right, and bottom settings are relative to the boundaries of its ancestor element (box). If a displacement direction is set for it, the element (box) will first move to the boundary in that direction, and then move relative to the boundary.

Fixed positioning: fixed positioning is also separated from the standard document flow, but it is relative to the browser window and will not change with the movement of the scroll bar or interface. It can also be set top, left, right, bottom values.

As for the column layout, I personally use the following methods:

1. If it is divided into two columns, you can apply float to the two boxes at the same time for layout. You can set Set the width or width percentage of the left and right boxes.

　2. It is also laid out in two columns. You can also apply left floating layout to the box on the left, apply positioning to the box on the right or set its margin value to position.

　3. For a three-column layout, it is best to use the method of floating and positioning. Float the boxes on the left and right sides, and set the left and right margins of the middle element (box) to achieve positioning.

It must be understood that the great initiative of floating may cause the parent container to collapse. That is to say, when all elements in the container float (which will cause the height of the parent container to be zero) or the internal elements do not float. When the elements are not enough to support the parent container, the height of the parent container will be 0 or not enough to meet our page layout requirements. Then, we must think of some ways to solve this problem. I have a few ways:

1. Set a height for the parent container

2. Set the parent container overflow: hidden or overflow: auto;

overflow:hidden;
overflow:auto;

　3. Set the parent element to float (not recommended)

　4. Set the empty element to it (clearfix: both)

　5. Apply the following style to the parent element:

.clearfix:before,
.clearfix:after
{
    content:"";
    display:table;
}
.clearfix:after
{
    clear:both;
}

In summary, for the layout of elements in web pages, floating and positioning often need to be used together. Only when combined can we achieve the effect we need.

The above are some of my little experiences about CSS positioning and floating during this period. There may be errors in it. I hope you can point them out to me so that we can all make progress together. Let me summarize these I read a lot of documents from big guys, so I borrowed a lot of their opinions, expressed some of my own understandings, and at the same time deepened my understanding of the knowledge involved. I hope everyone will work together on the front-end road and make progress every day!

For more CSS floating, positioning, and parent container collapse issues, please pay attention to the PHP Chinese website for related articles!