In this article, I will implement the following six layouts in several different ways

1. Layout display

2. float

2.1 Float Implements left and right layout

<style>
    body{margin:0; padding: 0; }.left{
        width: 300px;
        height: 500px;
        float: left;
        background-color: cornflowerblue;
    }
    .right{
        height: 500px;
        margin-left: 300px;
        background-color: coral;
    }
</style>
<body>
   <div class="main">
       <div class="left">Left</div>
       <div class="right">Right</div>
   </div>
</body>
Copy the code

2.2 Float + Positon realizes left-center and right-side layout

<style>
    body{margin: 0;padding: 0; }.left{
        width: 200px;
        height: 500px;
        float: left;
        background-color: cornflowerblue;
    }
    .main{
        height: 500px;
        margin: 0 300px 0 200px;
        background-color: darkgoldenrod;
    }
    .right{
        width: 300px;
        height: 500px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: darkseagreen;
    }
</style>
<body>
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</body>
Copy the code

2.3 Float implements left and right layout

<style>
    .top{
        height: 100px;
        background-color: yellow;
    }
    .main{
        margin-top: 10px;
    }
    .left{
        float: left;
        width: 100px;
        height: 500px;
        background-color: yellowGreen;
    }
    .right{
        height: 500px;
        margin-left: 110px;
        background-color: red;
    }
</style>
<body>
    <div class="top">Top</div>
    <div class="main">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</body>
Copy the code

2.4 practice

Exercise 1: Float up, left, right, and down layout

Exercise 2: Float implements top left, middle right, bottom right layout

  • Exercise 1 Source code
  • Exercise 2 Source code

3. Flex

3.1 Flex implements left and right layout

<style>
    .container{
        display: flex;
    }
    .left{
        width: 300px;
        height: 500px;
        background-color:cornflowerblue;
    }
    .right{
        height: 500px;
        flex: 1;
        background-color:darkgoldenrod;
    }
</style>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</body>
Copy the code

3.2 Flex implements left, middle and right layouts

<style>
    .container{
        display: flex;
    }
    .left{
        width: 200px;
        height: 500px;
        background-color:darksalmon;
    }
    .main{
        height: 500px;
        flex: 1;
        margin: 0 10px;
        background-color:darkorange;
    }
    .right{
        width: 200px;
        height: 500px;
        background-color:darkmagenta;
    }
</style>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>
Copy the code

3.3 Flex implements top left and right layout

<style>
    .top{
        height: 200px;
        background-color:darkorange;
    }
    .container{
        display: flex;
    }
    .left{
        width: 300px;
        height: 500px;
        background-color: tomato;
    }
    .right{
        height: 500px;
        flex: 1;
        background-color: yellowGreen;
    }
</style>
<body>
    <div class="top">Top</div>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
</body>
Copy the code

3.4 practice

Exercise 1: Flex implements up, left, and down layouts

Exercise 2: Flex implements top left, middle right, bottom right layout

  • Exercise 1 Source code
  • Exercise 2 Source code

4. Compare advantages and disadvantages

4.1 float layout

Advantages: Simple, good compatibility

Disadvantages: Disconnects from document flow and requires manual cleanup of floats

4.2 the flex

Advantages: A perfect layout scheme

Disadvantages: not compatible with browsers below IE8

4.3 positioning

Advantages: Fast and convenient

Disadvantages: Separated from the document flow, high maintenance cost, not conducive to expansion

5. Clear floating methods

Common clear float basically has a few kinds of methods as follows

  1. Style =”clear:both”
  2. Using pseudo classes,: after