<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通过元素选择器(因为就一个article所以直接用标签(元素)名)设置article的高度 */
article{
/* 设置边框但是outline不占px(像素) */
outline: 2px solid red;
}
/* 通过类选择器设置左边的盒子 */
.leftBox {
width: 200px;
height: 200px;
/* 文本水平居中 */
text-align: center;
/* 设置行高 */
line-height: 200px;
background: gray;
/* 左浮动 */
float: left;
}
.rightBox {
width: 200px;
height: 200px;
/* 文本水平居中 */
text-align: center;
/* 设置行高 */
line-height: 200px;
background: gray;
float: right;
}
/* 当我们看见article的高度塌陷了就没有高度----->可以将下面的css样式注释掉或者删除掉(反正可以Ctrl+z)撤销，看看效果你就明白了 */
/* 下面我们需要用到伪元素::after来清除浮动让article的高度恢复(但可以了解浮动,后面学了定位还要简单些) */
article::after{
/* 往article的内容后面再添加内容，""内下面为添加的空白，""内也可以文或字母等 */
content:"";
/* display转换为block(块)元素 */
display: block;
/* clear为清除浮动 */
clear: both;
}
</style>
</head>
<body>
<header>
头部区域
</header>
<article>
<div class="leftBox">左边的盒子</div>
<div class="rightBox">右边的盒子</div>
</article>
<footer>
页脚区域
</footer>
</body>
</html>