一、float布局
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: aqua;
}
.right {
float: right;
width: 200px;
height: 200px;
background-color: blueviolet;
}
.main {
height: 200px;
background-color: chocolate;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main">文字文字文字文字</div>
</body>
</html>
經過測試發現當中間區域高度小於左右區域任一高度時效果是正常的，但當高度大於左右兩邊高度時就會出現如下情況，如下圖：
這種情況要怎么解決呢？有兩種方法可以解決：
（1）在中間區域設置margin-left和margin-right，本示例中只要設置左右間距為200px就可以完美解決
（2）在中間區域設置overflow: hidden（原因是：overflow: hidden可以觸發bfc（bfc：塊級格式化上下文），渲染規則：bfc里計算高度時，浮動的元素也參與計算）
這里特別提醒由於我們使用了float, 所以為了不影響其他元素的顯示這里需要清除浮動,清除浮動的方式有很多大家可以自行搜索使用我這里使用偽元素的方式
.main::after{
content:'';
display: block;
clear: both;
}
二、Position布局:
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 300px;
background-color: aqua;
}
.main {
position: absolute;
left: 200px;
top: 0;
right: 200px;
height: 500px;
background-color: chocolate;
overflow: hidden;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="main">文字文字文字文字</div>
<div class="right"></div>
</body>
</html>
三、table布局:
table是一種常見的布局方式,他可以將整個頁面按照表格的方式設置為多行多列,但是由於書寫table標簽比較麻煩尤其是涉及到table內嵌table的時候，所以CSS給我們提供了display: table的方式可以讓讓們方便的使用table布局, 設置子元素為列的屬性為display:table-cell
display:table相當於<table>，display:table-cell，就相當於<th><td>
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
display: table;
}
.left,
.center,
.right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: aqua;
}
.center {
background-color: chocolate;
}
.right {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center">文字文字文字文字</div>
<div class="right"></div>
</div>
</body>
</html>
四、彈性(flex)布局:
flex布局是W3C提出了一種新的方案，可以簡便、完整、響應式地實現各種頁面布局。
當給元素設置display:flex，則該元素就是一個flex容器,其子元素就是容器成員,稱之為flex項目,每個項目默認按照從左到右方式排列。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: flex;
}
.left {
width: 200px;
height: 200px;
background-color: aqua;
}
.center {
flex-grow: 1;
background-color: chocolate;
}
.right {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center">文字文字文字文字</div>
<div class="right"></div>
</div>
</body>
</html>
五、網格(gird)布局:
網格它將網頁划分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。
將屬性 display 值設為 grid 或 inline-grid 就創建了一個網格容器，所有容器直接子結點自動成為網格項目。
gird提供了 gird-template-columns、grid-template-rows屬性讓我們設置行和列的高、寬
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網格(gird)布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.left {
background-color: aqua;
}
.center {
background-color: chocolate;
}
.right {
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center">文字文字文字文字</div>
<div class="right"></div>
</div>
</body>
</html>