继上次盒子模型后，继续学习结构伪类选择器和伪元素等相关的知识...
一、结构伪类选择器
这种情况一般情况下是一个块儿，如果想要设置其CSS属性，要加上display：block语句；
如果不想换行，就设置成行内块儿。例：
下面介绍一个很重要的概念：浮动
浮动，可以使两个块标签没有任何缝隙的在一行排列。如以下代码：会显示缝隙，若转成行内块后不想产生浮动则需要将两个 div 标签在同一行书写，但是这样会导致代码可读性下降！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 100px;
width: 100px;
display: inline-block;
}
.one {
background-color: pink;
}
.two {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>
那么利用浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
height: 100px;
width: 100px;
display: inline-block;
}
.one {
background-color: pink;
float: left;
}
.two {
background-color: skyblue;
float: left;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>
就不会产生块与块之间的缝隙了
如果是有版心居中的需求的话，就要现有一个 div 标签作为父类，加上语句：margin： 0 auto 做出页面中的版心居中的效果后，然后加上浮动。具体实例：（仅做蓝色橙色部分）
针对这部分，文章末尾有两个代码实例，检测一下效果。
下面，介绍一个特殊情况：清除浮动（这是用来debug的，不是常用的手段）
一个很简单的例子：当父元素没有高度时，位于父元素下面一行的元素会浮动上来，从而与父元素中的盒子产生了覆盖的效果。此时就要用到清除浮动的办法，若说给父元素加上高度为解决方案的话，对于新浪新闻、京东商品这些不确定会有多少数据的网站不可行，此时就要用其他的解决方案
