How to implement multi-column layout with CSS

CSS several ways to implement multi-column layout

If the following three P are displayed on the same line

<p ><p style= "background-color:red" >1</p><p style= "Background-color:yellow" >2</p> <p style= "Background-color:blue" >3</p></p>

1:float implementing multi-column layouts

The Float property controls whether the target HTML component floats and how it floats. After the property is set, the object is treated as a block component.

The floating HTML component floats and immediately follows its previous component until it encounters a border, an inner patch, an outer patch, or another block.

        p>p{            border:1px solid black;            Float:left;            width:200px;            height:200px;            Text-align:center;        }

2:inline-block Box Model

The elements of the Inline-block box model do not occupy a single line, and the width and height are also supported.
The Inline-block box model is bottom-aligned by default, and Vertical-align:top aligns it to the top.

        p>p{            Display:inline-block;            border:1px solid black;            Text-align:center;            width:200px;            height:200px;            Vertical-align:top;        }

Inline-block the spacing between elements that are rendered horizontally, in the case of line breaks, or spaces separated. Remove the space and the gap will disappear naturally.

3:display:flex Flexible layout

Flex Flexible layouts are powerful, providing maximum flexibility for box-shaped models for complex layouts, and any container can be specified as a Flex layout.

The Flex-direction attribute determines the direction of the spindle, flex-direction:row, and is arranged horizontally in the parent container,Flex-direction:column; Represents the vertical arrangement in the parent container.

        p{            Display:flex;            Flex-direction:row;            height:200px;            width:600px;        }        p>p{            border:1px solid black;        }