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
- Style =”clear:both”
- Using pseudo classes,
: after