Common Css Layouts

Two-column layout (sidebar fixed width main column adaptive)

Float + Overflow (BFC principle)

Float + margin

Method 3: Flex

Three-column layout (two side columns of fixed width main column adaptive)

Method 1: The Grail layout

Method two: double flying wing layout

Float + Overflow (BFC principle)

Multi-column contour layout

Method 1: Padding + negative margin

Method 2: Set the parent background image

Three-line layout (head and tail fixed height main column adaptive)

<div class="layout">
    <header></header>
    <main>
        <div class="inner"></div>
    </main>
    <footer></footer>
</div>
Copy the code

html.body..layout {
    height: 100%;
}
body {
    margin: 0;
}
header.footer {
    height: 50px;
}
main {
    overflow-y: auto;
}

Copy the code

Method 1: CALC

Method 2: Absolute

Make a summary

This is these days, through the online learning of some CSS commonly used layout, I hope to help you ！！！！