float页面布局
程序员文章站
2022-04-25 15:49:49
...
<head>
<meta charset="UTF-8">
<title>float页面布局</title>
<style>
*{
margin: 0;
height: 0;
}
.c1{
height: 1000px;
width: 20%;
background: red;
float: left;
}
.c2{
height: 1000px;
width: 80%;
background: green;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
float;left 往左漂浮
right 往右漂浮
如果有边框的会浮动会造成边框塌陷
#d1:after{
content: “”;
clear: left;
display: block;
}
引用第三个标签，清除浮动，固定住边框