01-佈局擴充套件-BFC完成聖盃佈局
阿新 • • 發佈:2021-08-22
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
*{ | |
margin:0; | |
padding:0; | |
} | |
body,html{ | |
height:100%; | |
} | |
.left{ | |
width:200px; | |
height:100%; | |
background:blue; | |
float:left; | |
} | |
.center{ | |
height:100%; | |
background:orange; | |
/* 觸發BFC */ | |
overflow:hidden; | |
} | |
.right{ | |
width:200px; | |
height:100%; | |
background:green; | |
float:right; | |
} | |
</style> | |
</head> | |
<body> |
|
<!-- 先寫左右,後寫中間板塊 --> | |
<div class="left"></div> | |
<div class="right"></div> | |
<div class="center"></div> | |
</body> |