全文概要
1 网页布局
网页布局描述的是浏览器如何对网页中元素进行排版的。
前端布局方案主要有三种：
- 传统布局方案（标准流、浮动流、定位流）
- flex布局方案
- grid布局方案
2 标准流
2.1 什么是标准流
- 浏览器默认的排版方式，标准流又称普通流。
- 标准流中元素会自动从左往右，从上往下的流式排列。
- 主要分为两个板块，一个是块级元素，一个是行内元素。
- 块级元素独占一行，行内元素水平排列，直到占满一行然后换行。
2.2 元素的分类
从元素的布局特性来分，主要可以分为三类元素：块级元素、行内元素、行内块元素。
2.21 块级元素
- 独占一行（width默认为100%，height为0）
- 宽高内外边距都是可以设置的
- 常见的块级元素：div h1-h6 ul ol li dl dt dd form p
2.22 行内元素
- 宽高靠内容撑开，一行可以放多个
- 不能设置宽高，就像橡皮筋包住字
- 常见的行内元素：span a b strong i em ins del u
2.23 行内块元素
- 宽高靠内容撑开 ，一行可以放多个
- 宽高内外边距都是可以设置的
- 常见的行内块元素：Img input a
注：行内元素和行内块水平排列时，两两之间会出现大约6px的空白间隙，这是由于元素间空白字符（换行符、空格或制表符），代码换行所导致。
3 浮动流
3.1 概述
- 半脱离标准流的排版方式
- 主要用来做网页的横向布局
- 元素设置浮动后，设置宽高起作用，默认在当前包含块左上一排，如果前边有块级元素，会排在元素的下面
- 浮动分为左浮动：flaot:left和右浮动：float:right
3.2 特点
- 浮：加了浮动的元素盒子是浮起来的，漂浮在其他标准盒子之上
- 漏：浮动的盒子原来的位置漏给了标准流盒子
- 特别注意：首先浮动的盒子需要和父级盒子搭配使用，其实，特别注意，浮动可以使元素显示模式体现为行内块特性
3.3 排列方式
3.31 第一个盒子浮动
<head>
<meta charset="utf-8">
<title></title>
<style>
.son1{
width: 200px;
height: 100px;
background-color: pink;
float:left;
}
.son2{
width: 200px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="son1"></div>
<div class="son2"></div>
</body>
复制代码- 两个盒子宽高一样，第一个盒子浮动，只能看到第一个
- 两个盒子宽高不一样，第一个盒子浮动，第一个盒子宽高>第二个盒子，只能看到第一个盒子
- 第二个盒子宽高>第一个盒子，可以看到第二个盒子溢出的部分
3.32 第二个盒子浮动
第一个盒子独占一行，第二个盒子独占一行
<head>
<meta charset="utf-8">
<title></title>
<style>
.son1{
width: 200px;
height: 200px;
background-color: pink;
}
.son2{
width: 100px;
height: 100px;
background-color: aquamarine;
float:left;
}
</style>
</head>
<body>
<div class="son1"></div>
<div class="son2"></div>
</body>
复制代码
4 清除浮动
4.1 为什么要清除浮动？
如果son1和son2浮动了，浮动元素不占有位置，父亲没有高度，此时后面的元素就会跑上来。
4.2 本质
- 清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。
- 清除浮动就是把浮动盒子圈到里面，让父盒子闭合出口，不让他们出来影响其他元素。
- 本质：闭合浮动
4.3 清除浮动方法
4.31 伪元素清除浮动
给所有浮动元素的父级一个clearFix的类名
当一个元素需要清除浮动的时候 直接设置clearFix类名即可
代表网站：百度、淘宝、网易等
.clearFix::after{
content:""; /*必须拥有content属性 内容为空*/
display: block; /*必须块标签才能清浮动 */
clear: both; /*清除浮动*/
height: 0;/*高度为0 不占用空间*/
}
/*兼容ie*/
.clearFix{
*zoom:1;
}
复制代码4.32 双伪元素清除浮动
代表网站：小米、腾讯
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
*zoom:1;
}
复制代码- 优点：符合语义化结构
- 弊端：写法复杂，需要兼容ie
clear 属性清除浮动的原理是什么？
设置元素禁止浮动元素出现在它的左侧、右侧甚至是双侧
4.33 给父级设置overflow：hidden
- 优点：写法简单，兼容性好
- 弊端：里面的内容或者元素超出父元素就会隐藏
4.34 浮动元素末尾加一个空标签
- 优点：写法简单，兼容性好
- 弊端：增加结构负担，代码冗余
两种不需要清除浮动情况：
- 父盒子本身有高度
- 父盒子本身有float属性（父元素BFC）
5 定位流
浮动是多个块级元素在同一行显示，定位主要是有层叠的概念。
5.1 定位的应用场景
- 轮播图
- 点击隐藏效果的二维码
- 版心之外广告
- 下拉菜单
5.2 分类
5.21 相对定位
- 占位定位 不脱标
- 参考点：自身位置
常用于浮动元素上，用于调节占位浮动溢出父盒子，调节浮动后上下的一两像素。
5.22 绝对定位
- 完全脱标 不占位
- 参考点：离自己最近设置了（绝对定位、相对定位、固定定位）的父元素
- 父元素无定位，默认参考点初始包含块
- 行内元素设置了固定定位和绝对定位，会转为块
初始包含块 ——
是浏览器厂商提供，与视口等高等宽的透明矩形，但是不是视口，从视觉的角度上来可以理解为浏览器第一屏四个角。
5.23 固定定位
- 参考点永远是浏览器窗口
- 完全脱标 不占位
5.3 定位的层级
- 定位层级是由父元素决定的，层级相同，后写的父元素连同子元素会压在先写的元素以及子元素上面
- 当父元素不设置层级时，子元素的高低将决定自身是否压倒其他元素和子元素。
结语
本篇文章就到此为止啦，由于本人经验水平有限，难免会有纰漏，对此欢迎指正。如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
