Detailed explanation of the mutual influence of display/float/position attribute values ​​in CSS

There are three properties related to layout and box creation: 'display', 'position' and 'float', which interact with each other as follows:

If the value of 'display' is 'none' , then 'position' and 'float' have no effect. In this case, no box is generated.

Otherwise, If the 'position' value is 'absolute' or 'fixed', the box is absolutely positioned, and the calculated value of 'float' is 'none', The value of 'display' is set as shown below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and its containing block.

Otherwise, If the value of 'float' is not 'none', the box is floating and the value of 'display' is set as follows.

Otherwise, If the element is the root element, the value of 'display' is set as follows (except for the value specified by list-item, which is calculated as ' block' or 'list-item' is not defined in CSS2.1.)

Otherwise, The value of the 'display' attribute is its specified value in other cases. value.

where inline-flex and flex are new attribute values ​​introduced by the CSS3 elastic layout module.

In summary, the display attribute of the content items of absolute positioning, flexible layout and grid layout containers will be blockified.

The above article briefly discusses the mutual influence of display/float/position attribute values ​​​​in CSS. This is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support PHP Chinese website. .

For more detailed explanations of the mutual influence of display/float/position attribute values ​​in CSS, please pay attention to the PHP Chinese website!