一、浮动

浮动其实我们之前学习的时候接触过，就是使用 float 进行浮动，我们来看一下

然后我们来让这个 a2 进行向左浮动

可以看到，我们这个 BBB 一下子就靠到了这个 AAA 的右侧

这个就是 float 带来的效果，这里的 html 页面已经脱离了这个标准流

二、clear 效果

clear 是可以清理掉这个悬浮的样式，我们来使用一下

可以看到啊，我们让 a2 向左浮动，a3 向右浮动，但是不难发现，这个 p 段落其实也向上移动了，我们给 a4 添加样式，让他没有这个浮动

可以看到，我们将 clear 设置成 both 之后，这个 p 标签是很好的显示在这 AAA 和 BBB 的下面了

三、定位

定位我们使用到的是 position ，这个属性有这样的几个值，一个是 static ，这个是默认的，也就是按照标准流进行定位。还有就是 relative，这个是相对于原本的标准位置进行偏移一定的距离。再来还有 absolute，这个是绝对定位，这个是以包含框为基准进行偏移的，最后还有一个 fixed ，这个是固定定位，是以这个浏览器为基础进行定位，我们来一个一个看

1. static

其实这个默认的就是 static，也就是标准流定位

其实就根本没有变化，因为默认的就是标准流定位，所以我们看不出来啥，去掉和加上都是一样的

2. relative

我们让 div2 的这个框的 position 设置成relative，并且给一个 right: 20px; 我们来看看效果

可以看到，跑掉了，相对于外面的 div1 向左移动了 20px

3. absolute

绝对定位，可以说是以后可能常用的东西，废话不多说，直接上例子

可以看到啊，这个 div1 这个变成一条直线了，这个是因为我们没有给这个 div1 设置高度，只有一个宽度，而且里面的这个 div 没有了，缺少内容之后就变成了一个直线，而里面的 div2 变成了绝对定位之后，在举例右侧 20px 的地方显示

绝对定位的基准是以包含框进行偏移，而包含框就是我们的 body

但是，我们再来修改一下

我们给这个 div1 进行设置 position 之后，这个 div2 就不以这个 body 进行偏移了，而是以 div1 为基准进行偏移 20px

这也就是说，我们这个包含框其实是最近的一个有 position 的标签，如果没有，那就是按照最大的包含框进行偏移，也就是body

4. fixed

fixed，这个呢和上面的 absolute 类似，但是这个就是按照浏览器的大小进行偏移，我们来看一下

相同的一段代码，只是修改了 position 的值，就变了成了另一种样子

 

就这么多，大家好好练习一下，有问题联系我QQ：2100363119

最近我的官网开了，欢迎大家访问：https://www.lemon1234.com