Shulou(Shulou.com)06/01 Report--

This article mainly introduces css how to use float to achieve multi-column layout, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

If the following three div are displayed on the same line

1 2 3

Implementation of multi-column layout with float

The float property controls whether and how the target HTML component floats. When this property is set, the object is treated as a block component. There are four values for float: left (floating to the left), Right (floating to the right), none (not floating), and inherit (inheriting the value of the parent element). Set box1,box2,box3 to float to the left. If the next sibling element of the floating element is also set to the same floating direction, it will be displayed immediately after the change element.

When float is set, the element is detached from the normal document stream. Their parent element will not be stretched out either, so the height of # parent is 0 at this time.

# parent > div {border:1px solid black; float:left; width:200px; height:200px; text-align: center;} # box1 {background-color:red;} # box2 {background-color:yellow;} # box3 {background-color:blue;}

We can also do this by setting box1,box2 to float to the left and box3 not to float. Because box1,box2 sets the float and then leaves the normal document stream. For box3, just as there is no box1,box2 in front of it, box3 will also be displayed on this line, but will be obscured by box1. Set the margin-left:400px; of the box3 to make it look like it is displayed behind the box1,box2. At this time # parent is supported by box3, and the height is 202px at this time.

# parent > div {border:1px solid black; width:200px; height:200px; text-align: center;} # box1 {float:left; background-color:red;} # box2 {float:left; background-color:yellow;} # box3 {margin-left:400px; background-color:blue } Thank you for reading this article carefully. I hope the article "css how to use float to achieve multi-column layout" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.