全文概要

1 网页布局

网页布局描述的是浏览器如何对网页中元素进行排版的。目前前端布局方案主要有三种：css

传统布局方案（标准流、浮动流、定位流）
flex布局方案
grid布局方案

2 标准流

2.1 理解

浏览器默认的排版方式，标准流又称普通流。
标准流中元素会自动从左往右，从上往下的流式排列。
主要分为两个板块，一个是块级元素，一个是行内元素。
块级元素独占一行，行内元素水平排列，直到占满一行而后换行。

2.2 元素的分类

从元素的布局特性来分，主要能够分为三类元素：块级元素、行内元素、行内块元素。html

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浮动了，浮动元素不占有位置，父亲没有高度，此时后面的元素就会跑上来。markdown

4.2 本质

清除浮动主要是为了解决父级元素由于子级浮动引发的内部高度为0的问题。
清除浮动就是把浮动盒子圈到里面，让父盒子闭合出口，不让他们出来影响其余元素。
本质：闭合浮动

4.3 清除浮动方法

4.31 伪元素清除浮动

给全部浮动元素的父级一个clearFix的类名当一个元素须要清除浮动的时候直接设置clearFix类名便可布局

表明网站：百度、淘宝、网易等flex

.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 属性清除浮动的原理是什么？设置元素禁止浮动元素出如今它的左侧、右侧甚至是双侧spa

4.33 给父级设置overflow：hidden

优势：写法简单，兼容性好
弊端：里面的内容或者元素超出父元素就会隐藏

4.34 浮动元素末尾加一个空标签

优势：写法简单，兼容性好
弊端：增长结构负担，代码冗余

两种不须要清除浮动状况：code

父盒子自己有高度
父盒子自己有float属性（父元素BFC）

5 定位流

浮动是多个块级元素在同一行显示，定位主要是有层叠的概念。

5.1 定位的应用场景

轮播图
点击隐藏效果的二维码
版心以外广告
下拉菜单

5.2 分类

5.21 相对定位

占位定位 不脱标
参考点：自身位置

经常使用于浮动元素上，用于调节占位浮动溢出父盒子，调节浮动后上下的一两像素。

5.22 绝对定位

彻底脱标不占位
参考点：离本身最近设置了（绝对定位、相对定位、固定定位）的父元素
父元素无定位，默认参考点初始包含块
行内元素设置了固定定位和绝对定位，会转为块

初始包含块 —— 是浏览器厂商提供，与视口等高等宽的透明矩形，可是不是视口，从视觉的角度上来能够理解为浏览器第一屏四个角。

5.23 固定定位

参考点永远是浏览器窗口
彻底脱标不占位

5.3 定位的层级

定位层级是由父元素决定的，层级相同，后写的父元素连同子元素会压在先写的元素以及子元素上面
当父元素不设置层级时，子元素的高低将决定自身是否压倒其余元素和子元素。

结语

本篇文章就到此为止啦，因为本人经验水平有限，不免会有纰漏，对此欢迎指正。如以为本文对你有帮助的话，欢迎点赞❤❤❤，写做不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写做的动力，感谢支持！

【CSS】细说网页布局中的标准流、浮动流与定位流