css-floating layout

Posted May 25, 20201 min read

layout

Use boxes for layout, the purpose of the layout is to display block elements in a row

<div class = "content">
    <div> </div>
    <div> </div>
    <div> </div>
</div>

1) Floating layout
    .content> div {
        float:left;
    }

float:left;
    Let the element float:
    1. Depart from the document flow(1. If the width and height are not specified, it is determined by the content; 2. The element does not occupy screen space after the document flow is removed, and the block element below it will be on top)
    2. All floating elements will enter another document flow(floating document flow), all floating elements in the floating document flow will be displayed on one line, when this cannot be put down, it will enter the next line
    3. Since the floating element is out of the document flow, the parent element [non-floating block element]will lose support
    Solution:Insert a pseudo-element in the parent element, let this pseudo-element float clean