Article directory
foreword
1. Demand
The button needs to always float on the right side, and the table below should also fill the screen.
2. Encountered problems and evolutionary solutions
The button is always on the right side, which can be solved by using float, and the height of the element is calculated at the same time, so as to control the height of the table in real time. However, when this kind of problem is encountered, when the float attribute is in effect (the situation in Figure 1), the height of the node cannot be calculated and the height of the table cannot be accurately set. The problem turns into solving the collapse problem caused by float.
1. What is high collapse
To put it simply, the height collapse means that the child elements contained in the parent element are floating. When the height of the parent element is not set, it will become a line because there are no child elements to "expand".
2. How to solve the high collapse
1. Most of the solutions.
① Add a fixed height to the parent element.
Cons: Not suitable for highly adaptive layouts.
②Add overflow:hidden to the parent element;
Disadvantages: Not suitable for use with page layouts that have been positioned
③ Add an empty label to all floating boxes, such as div, and add a statement clear:both;
Disadvantages: There are a lot of empty tags, resulting in code redundancy
④ For the collapsed parent element: after{content: "";display:block;clear:both;visibility:hidden;}
Disadvantages: relatively troublesome
2. The solution I introduced
①Add display:flow-root to the parent element.
This method will not have any side effects. It was born to solve the height collapse and generate a block-level element box. However, due to the layout method introduced in 2019, it cannot be supported on relatively old browsers.