目录
- 前言
- 一，浮动
- 1.1 传统网页布局的三种方式
- 1.2 初步了解浮动
- 1.3 浮动float
- 1.4 浮动特性（重难点）
- 1.4.1 性质1: 脱标，不占位
- 1.4.3 性质2: 浮动元素之间的相对位置
- 1.4.3 性质3: 自动转化为行内块元素
- 1.5 浮动与网页布局
- 1.6 清除浮动
- 1.6.1 为什么要清除浮动
- 1.6.2 方法一：额外标签法
- 1.6.3 方法二： 给父级元素添加overflow
- 1.6.4 方法三： after伪元素
- 1.6.4 双伪元素清除浮动
- 1.7 浮动布局总结
- 1.7.1 为什么要一浮全浮
- 二，定位
- 2.1 定位
- 2.1.1 定位可以用来干什么
- 2.1.2 定位组成
- 2.2 relative相对定位
- 2.3 绝对定位
- 2.3.1 子绝父相
- 2.4 固定定位
- 2.4.1 固定定位小技巧
- 2.5 粘性定位
- 2.6 定位的特殊性
- 三，网页布局的总结
- 3.1 浮动与定位分别对文字的处理
- 3.2 网页布局的总结
- 四，总结
前言
通过盒子模型，清楚知道大部分html标签是一个盒子
通过css浮动，定位可以让每个盒子排列成网页
一个完整的网页，是标准流，浮动，定位一起完成布局的，每个都有自己的用法
–1.标准流
----可以让盒子上下排列，垂直的块级盒子显示就用标准流布局
–2.浮动
----可以让块级盒子左右进行对齐，多个块级盒子水平排列就用浮动
–3.定位
----定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内部移动就用定位布局
本节博客将带领读者朋友学习浮动与定位的相关知识，感谢大家的关注
一，浮动
1.1 传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置
CSS提供了三种串通布局方式，简单说，就是盒子如何进行排列顺序：
普通流（标准流):
所谓的标准流，就是标签按照规定好默认方式排列
–1.块级元素会独占一行，从上到下顺序排列
–常用元素:div hr p h1-h6 ul ol dl form table
–2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
–常用元素：span a i em
以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式
还有浮动和定位
注意：在世纪开发中，一个页面内基本都包含了这三种布局方式（后面移动端学习新的布局方式）
这三种布局方式都是用来拜访盒子的，盒子摆放的合适位置，布局自然就完成了
1.2 初步了解浮动
由第一节内容可知，标准流实际上是界面的纵向布局。可是光有纵向布局够吗？很多网页都是拥有横向布局的，比如我们最熟悉的淘宝
类似这种横向布局，标准流没有办法很好的实现，所以我们采用本节重点浮动来解决页面的横向布局。
1.3 浮动float
float指浮动
float: left代表向左浮动，而float: right代表向右浮动
请看这段代码：
<style>div {float: left;width: 150px;height: 200px;background-color: pink;}<style>
<body><div>1</div><div>2</div><div>3</div>
</body>
按照标准流，则这三个盒子应当从上到下进行排列
一旦我们在选择其中加入float: left
加入float：right
总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式
典例：浮动最典型的应用可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
1.4 浮动特性（重难点）
1.4.1 性质1: 脱标，不占位
<style>.box1 {float:left;width: 200px;height: 200px;background-color: pink;}.box2 {width: 300px;height: 300px;background-color: rgb(0,153,255);}</style>
<body><div class="box1">浮动的盒子</div><div class="box2">标准流的盒子</div>
</body>
请看如上两段代码,有两个盒子，我给相对小的盒子设置了浮动，没有给相对较大的盒子设置，请问会出现什么情况？
我们可以看到，浮动的盒子没有占用标准流动位置，而是浮在标准流盒子的上面
从而，我们可以根据这个例子总结出浮动的几个性质
1.浮动最典型的特征：脱离标准普通流的控制（浮）移动到指定的位置（动），俗称脱标
2.浮动的盒子不再保留原先的位置，而其他的盒子会占有它的位置，已经飞走了，浮在了其他盒子上方，其位置可以重复利用
这里说一下我的理解： 就相当于蓝色盒子站在地面，我给粉色盒子设置了浮动让它漂浮在了蓝色盒子的上空，请问地面上粉色盒子还可以老老实实在地面呆着嘛——不行。请问原先粉色盒子呆的地方不可以站人嘛——它已经飞起来了不占地方，所以可以站人。
希望读着朋友认真理解。
1.4.3 性质2: 浮动元素之间的相对位置
<style>div {float: left;width: 200px;height: 200px;background-color: pink;}.two {background-color: purple;height: 250px;}.four {background-color: skyblue;}</style>
<body><div>1</div><div class="two">2</div><div>3</div><div class="four">4</div>
</body>
观察上述代码，这里我给所有的div都设置了浮动
可以看出
浮动元素会一行内显示并且元素顶部对齐
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的宽度会与下一行对齐
1.4.3 性质3: 自动转化为行内块元素
这里我们要先复习，什么是行内元素，行内块元素，以及块元素？
（熟练可跳过）
块元素
行内元素
行内块元素
转换
而在浮动中 ==任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性== ==如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度==
<style>span,div {float: left;width: 200px;height: 100px;background-color: pink;}p {height: 200px;width: 200px;background-color: purple;float: right;}</style>
<div>1</div><span>2</span><span>3</span><p><p>
如上代码，理论上讲，span为行内元素，如果要转化成行内块或者 行内需要用到display，但是这里只用到了浮动，我们依旧可以给它们指定长宽，因为浮动默认转化为了块级元素
最后的结果：
1.5 浮动与网页布局
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列到上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
也就是我们最初看到的那样
整体标准流：
大盒子中加浮动
这里我附上代码，大家可以自行学习
<!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>* {margin: 0;padding: 0;}li {float: left;list-style: none;width: 237px;height: 300px;background-color: pink;margin-right: 10px;}.box .last {margin-right: 0;}.top {/* 因为宽度就是浏览器宽度所以不用设置 */height: 50px;background-color: gray;}.banner {height: 150px;width: 980px;margin-top: 10px;margin: 10px auto;background-color:gray;}.box {width: 980px;height: 300px;background-color:gray;margin: 0 auto;}.footer {height: 200px;background-color: gray;margin-top: 10px;}</style>
</head>
<body><!-- 1,2 标准流做上下，浮动做左右 --><div class="top">top</div><div class="banner">banner</div><div class="box"><ul><li></li><li></li><li></li><li class="last"></li></ul></div><div class="footer">footer</div><!-- 只要是通栏的盒子都和浏览器一样宽，不需要指定宽度 --><!--先画盒子再填样式-->
</body>
</html>
1.6 清除浮动
1.6.1 为什么要清除浮动
我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的
但是，所有的父盒子，必须有高度嘛？
通过上一节希望大家可以明白网页布局的一个思路：我们可以先把盒子摆好，再去填充盒子内部的样式，也就是先布局，再修饰。
那么很多时候，比如我们的新闻界面，并不是每增加一篇新闻都需要重新进行一次布局，而是有固定的布局。有的新闻比较长，有的新闻非常的短，我们也不方便给高度
理想中的情况： 让子盒子撑开父亲，有多少孩子，我父盒子就设置多高————我们不应该给父盒子高度
但是如果我们不给父盒子高度有问题吗
在标准流中，我们没有给父元素高度，只给了子元素高度，但是父元素的高度被子元素撑开了
但是加了浮动后，父元素的高度变成了0，因为浮动的元素不占有高度，于是高度变成了0
由于浮动元素不再占有源文档流的位置，所以它会对后面的元素排版产生影响，所以我们需要清除浮动
<style>.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: skyblue; }.footer {height: 200px;background-color: black;}</style><body><div class="box"><div class="damao">大毛</div><div class="ermao">二毛</div><div ></div></div><div class="footer"></div>
</body>
我为这个大黑盒子清除了浮动
.clear {clear: both;}
</style><body><div class="box"><div class="damao">大毛</div><div class="ermao">二毛</div><div class="footer clear"div></div>
</body>
所以大黑盒子不再受浮动的影响，我没有给box盒子的高度，但是下面的黑色部分可以自动识别上面box盒子的高度
黑色盒子直接被清除了浮动
清除浮动的本质：清除浮动元素造成的影响
但是如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动监测高度，父级有了高度，就不会影响下面的标准流了
清除浮动语法：
选择器{clear: 属性值;}
left: 不允许左侧有浮动元素（清除左侧浮动的影响）
right: 不允许右侧有浮动元素（清除右侧浮动的影响）
both: 同时清除左右两侧浮动的影响
注意：在世纪开发中，几乎只用clear: both;
清除浮动的策略：闭合浮动
清除浮动方法：
1.额外标签法，也称为隔墙法，是W3C推荐的做法
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
下面我将会介绍三种常用的清除浮动的方法
1.6.2 方法一：额外标签法
额外标签法：在浮动元素的末尾添加一个空标签，例如div style="clear：box"div
或其他标签也可以，做一个标签把门关上，不影响其他盒子，记住，要找到我们最后一个盒子然后在后面写
优点：通俗易懂 缺点：无意义标签多
注意：添加的必须是块级元素，而不能是行级元素
这种方法在工作中并不常用
1.6.3 方法二： 给父级元素添加overflow
还是刚刚的代码
我给body盒子清除了浮动
.box {width: 800px;border: 1px solid blue;margin: 0 auto;overflow: hidden;}
也可以得到了刚刚的效果
通过给父级添加overflow属性，将其属性设置为hidden，auto或scroll,最常用的是hidden。这个代码还可以防止外边距合并
优点：代码简介，缺点：无法显示溢出的部分，代码名字叫做溢出隐藏（定位再讲，先了解）
1.6.4 方法三： after伪元素
在style中写入固定代码
.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;/* after属性一定是块元素 */}.clearfix {*zoom: 1;/* 兼容，通用代码 */}
用在body盒子上
<body><div class="box clearfix"><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div>
注意，这种方式是额外标签法的升级版，也是给父元素添加
类似在所有盒子后面添加一个盒子
优点：不需要单独加标签，结构没有即最优，结构是最重要的，没有的盒子尽量不需要
缺点：照顾低版本浏览器
1.6.4 双伪元素清除浮动
<!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>
</head>
<style>.clearfix:before,.clearfix:after {content:"";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: skyblue; }.footer {height: 200px;background-color: black;}
</style><body><div class="box clearfix"><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div>也是给父元素添加，但是更加好理解，不光在后面插入了盒子，还在前面也插入了一个盒子有点：代码更简洁缺点：照顾低版本浏览器代表网站：小米，腾讯等
</body>
</html>
也是固定情况
1.7 浮动布局总结
没有浮动就是标准流，一个盒子只能占一行，而浮动没有办法压住标准流
1.浮动和标准流的父盒子搭配使用
–先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动
–一个盒子里面有多个盒子，如果其中一个盒子浮动，那么其他兄弟也应该浮动，以防止引起问题
注意：浮动只会影响后面的标准流，而不是前面的标准流
而且浮动也不能影响标准流，注意，标准流独占一行
什么叫做一个元素浮动全部都要浮动————浮动是自己加的，你给一个孩子加了浮动，也要给其他的孩子加浮动，而浮动的元素只会影响后面的盒子，不会影响前面的盒子
1.7.1 为什么要一浮全浮
大家看以下代码
<style>div .one,div .two,div .three {height: 200px;width: 200px;}.one {background-color: pink;}.two {background-color: skyblue;/* 二毛浮动，二毛的标准流的位置空着，而三毛看二毛位置是空的所以占了二毛的位置 */}.three {background-color: springgreen;}</style>
<body><div class="box"><div class="one">大毛</div><div class="two">二毛</div><div class="three">三毛</div></div>
</body>
如果我给第二个盒子设置浮动会怎么样？
为什么会出现这样的情况？
–给第二个盒子设置了浮动，所以第二个盒子就是完全飘起来的一个状态，它的位置被空起来，所以绿色盒子就占了原第二个盒子的位置，而由于蓝色盒子浮在上面，所以看到的只有粉色盒子和蓝色盒子。至于为什么“三毛”这两个字没有跟着浮上去，我将在下面做解答
所以我们最好是想要浮动，所有盒子都加上浮动
这就正常浮动了
二，定位
2.1 定位
2.1.1 定位可以用来干什么
以下情况使用标准流或者浮动能实现吗？
–某个元素可以自由的在一个盒子内移动盒子，并且压住其他盒子
–当我们滚动窗口时，有些盒子会固定在屏幕中的某个位置
而这些，定位可以帮我们实现
2.1.2 定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
–定位模式
static： 静态定位
relative： 相对定位
absolute： 绝对定位
fixed： 固定定位
–边偏移
边偏移就是定位的盒子移动到最终位置，有top，bottom，left和right 4个属性
边偏移属性：
top top: 80px 顶端偏移量，定义元素相对其父元素上边线的距离
bottom bottom：80px 底部偏移量，定义元素相对于其父元素下边线的距离
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离
记住：定位的盒子一定要通过这四个属性来做，不要和margin，padding混淆，这四个属性也只有定位才存在
–什么是静态定位
静态定位static（了解即可）
–静态定位是元素的默认定位方式，无定位的意思
----语法： {position: static;}
注意：
静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到
2.2 relative相对定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
语法：
在选择其中加入
{position: relative;
}
请看以下代码
<style>.pink {position: relative;top:100px;left: 100px;width: 200px;height: 200px;background-color: pink;}.red {width: 200px;height: 200px;background-color: palevioletred;}</style>
<body><div class="pink"></div><div class="red"></div>
</body>
这是两个相同大小的盒子，如果不加定位则两个盒子应该是一上一下。
我给类为pink的盒子设置了相对定位
则我给的top: 100px,left: 100px 则是对pink的位置进行了调整
最后结果为：
原来的盒子在变化后的盒子的上面的100px，原来的盒子在变化后的盒子的左边的100px
这就是相对定位的相对二字的理解。希望读着朋友能认真体味。
2.3 绝对定位
绝对定位是元素在移动位置的时候，是相对它的祖先元素来说的（拼爹型）
选择器语法
{position: absolute;
}
如果我们直接给一个div设置绝对定位
<style><style>.yeye {/*position: relative;*/width: 800px;height: 800px;background-color: hotpink;}.father {/*position: relative;*/width: 500px;height: 500px;background-color: skyblue;}.son {position: absolute;bottom: 10px;left: 30px;width: 200px;height: 200px;background-color: pink;}</style>
</style>
<body>
<div class="yeye"><div class="father"><div class="son"></div></div>
</body>
我们可以看到，如果只给粉色盒子（son）设置定位，则粉色盒子将以浏览器为主进行移动，并不以它的祖先元素为主定位
可是一旦我去掉上面的注释——也就是给它的爸爸和爷爷加上了相对定位
则以它的父盒子（skyblue，father）为主进行定位
所以我们可以得出下列结论：
绝对定位的特点：（务必记住）
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档)
2.若祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置
注意： 一个盒子可能不止有一个祖先怎么办？以最近一级带有定位祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置，它会飘起来，比浮动飘得还要高，所以说，它的位置不再保留，底下的盒子就会升起来
典型的轮播图左右，可以随便移动，但是不会占用别人的位置，脱离标准流
2.3.1 子绝父相
子绝父相：
如果子级使用绝对定位，父级则需要相对定位，这是定位中必须要记住的口诀
使用场景： 轮播图下面小点，左按钮，右按钮，按钮会压住图片，可以使用浮动
但是浮动前提要求：只影响后面的图片，如果是后插入，则只会影响下面的图片，在下面显示
其次： 小圆点也需要盒子。而如果三个盒子通过一行得用三个盒子
而绝对定位不占位置，可以在任何地方拜访盒子
并且，父盒子一定要加相对定位。父亲不能加绝对定位，父亲不占有位置，下面的盒子会升上去
当然，子绝父相也不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到
2.4 固定定位
固定定位： 是元素固定与浏览器可视区的位置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变
{position: fixed;
}
特点： 1.以浏览器的可视窗口为参考点移动元素,无论可视范围多大多小都能看见并且固定在相应位置，跟父元素没有关系
2.滚动也不会改变它的固定
3.固定定位不占有原来的位置
比如
<style>.dj {position: fixed;top: 100px;left: 40px;}</style>
<body><div class="dj"><img src="./r_dj.png" alt=""></div>p{来和妲己玩耍吧*50}
</body>
哪怕滚动条拉动也不改变位置
2.4.1 固定定位小技巧
如果我们想要：把固定定位在版心的右侧或者左侧，它可以跟着我们的版心跑。
第一步： 让固定定位的盒子left: 50% 走到浏览器可视区一般的位置
第二步： 让固定定位的盒子margin-left版心宽度的一般距离，多走版心宽度的一半位置
<style><style>.w {width: 800px;height: 1400px;background-color: pink;margin: 0 auto;}.fixed {position: fixed;/* 1.走浏览器宽度的一半 */left: 50%;/* top: 50%; */width: 50px;height: 150px;/* 2.利用margin走版心盒子宽度的一半距离 */margin-left: 400px;background-color: skyblue;}</style>
</style>
<body><div class="fixed"></div><div class="w">版心盒子 800px</div>
</body>
最后这个盒子就会一直固定在版心的右边
2.5 粘性定位
了解即可。这些特效都可以用js做出来
原因：为什么不常用： 兼容性较差，IE不支持
粘性定位可以是相对定位和固定定位的混合，sticky粘性的
最开始随着我们页面的滚动而滚动，但是一旦滚下去了也不会消失
选择器 {positon: sticky; top: 10px;}
特点： 1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加top，left，right，bottom其中一个才有效果，意思是一旦我们的盒子与上面接触为0像素那么久变为粘性定位
<style>body {height: 3000px;}.nav {position: sticky;top: 0;width: 800px;height: 50px;background-color: pink;margin: 100px auto;}</style>
<body><div class="nav">我是导航栏</div>
</body>
效果，导航栏会随着页面滚动而动，但是一旦过了这个页面，滚动了下一个页面导航栏又会重新回到头部。继续随着滚动而滚动
2.6 定位的特殊性
1.行内元素添加绝对定位或者固定定位，可以直接设置宽度和高度（这点与浮动类似）
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内部的大小
3.脱标的盒子不会触发外边距塌陷，，绝对定位（固定定位）元素都不会触发外边距合并的问题
三，网页布局的总结
3.1 浮动与定位分别对文字的处理
这要从浮动的历史开始说起。最早的浮动主要用来处理文字和图片的关系。
就类似上面这种情况，在文字中插入我们的图片。
所以我们的浮动也不会压住文字`
<style>.box {/* position: absolute; */float: left;width: 150px;height: 150px;background-color: pink;}</style>
<body><div class="box"></div><p>阁下何不同风起，扶摇直上九万里</p>
</body>
浮动并没有压住盒子，而是把盒子露了出来，没有压住盒子的文字和图片
浮动之所以不会压住文字，因为浮动产生的最初始为了做文字环绕效果的，文字会围绕浮动元素，这就是为什么浮动不会遮挡住文字
但是绝对定位（固定定位）会压住下面标准流所有的内容
我们给上面的代码注释去掉，加上绝对定位
3.2 网页布局的总结
通过盒子模型，清楚知道大部分html标签是一个盒子
通过css浮动，定位可以让每个盒子排列成网页
一个完整的网页，是标准流，浮动，定位一起完成布局的，每个都有自己的用法
–1.标准流
----可以让盒子上下排列，垂直的块级盒子显示就用标准流布局
–2.浮动
----可以让块级盒子左右进行对齐，多个块级盒子水平排列就用浮动
–3.定位
----定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内部移动就用定位布局
四，总结
以上便是对浮动和遍历知识的总结。
看懂了上面的知识，我建议大家可以着手仿写一些网站，比如学成在线
这里是我的学成在线网站仿写图，大家如果有兴趣可以看看，里面附上了网站的psd图片
学成在线
最后，感谢大家的关注，祝大家学习进步！！！
