李南江的前端课程知识点（九）浮动流

网页的布局方式

浏览器是如何对网页中的元素进行排版的。
1、标准流（文档流/普通流）排版方式，默认情况下网页会按照标准流的方式进行排版。
1.1、浏览器默认的排版方式就是标准流的排版方式。默认情况下所有的元素都是按照标准流进行排版的。
1.2、在CSS中将元素分为三类，分别是块级元素、行内元素、行内块级元素。
1.3、在标准流中有两种排版方式：一种是垂直排版（块级元素），一种是水平排版（行内元素，行内块级元素）

2、浮动流排版方式
2.1、浮动流是一种“半脱离标准流”的排版方式。
2.2、浮动流只有一种排版方式，就是水平排版方式，它只能设置某个元素在其父元素中左对齐或者右对齐。
注意点：
1、浮动流中没有居中对齐，没有center取值。
2、在浮动流中使用margin：0，auto；水平居中对齐是无效的。在浮动流中是不可以使用margin：0 auto；的，无效。
特点：
1、在浮动流中是不区分块级和行内以及行内块级元素的，都可以水平排版，都可以显示在同一行。
2、在浮动流中，无论是块级元素、行内元素，块级行内元素都可以设置宽高。
3、综上所述，浮动流中的元素和标准流中的块级行内元素很像。
如果给一个元素添加了float属性就表明该元素不会按照标准流进行排版，而是按照浮动流进行排版。
设置一个元素为float=left表明该元素会和其父元素的左边对齐。

3、定位流排版方式

浮动元素的脱标

1、什么是浮动元素脱标？
脱标：脱离标准流。
当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标，但还是会依然显示在页面中。

2、浮动元素脱标之后有什么影响？
如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的元素就会盖住后面的一个元素。浮动的元素是不会盖住浮动的元素的，浮动的元素只会盖住标准流中的元素。

浮动元素排序规则

1、相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面。
2、不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
3、浮动元素浮动之后的位置，由浮动元素之前在标准流中的位置来确定。

浮动元素的贴靠现象

当父元素宽度足够宽的时候，浮动的元素会并列的进行显示，如果不够宽，就往前面贴靠。
1、如果父元素的宽度能够显示所有浮动元素，那么浮动的元素会并排显示。
2、如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始往前贴靠。
3、如果贴靠了前面所有浮动元素之后都不能显示，最终会贴靠到父元素的左边或者右边。

浮动元素的字围现象

浮动元素之前的元素将不会受到影响。浮动元素之后的元素将围绕它。
虽然浮动的元素会盖住标准流中的元素，但是不会盖住标准流中的文字，标准流中的文字会环绕在浮动元素的周围，这个就叫浮动元素的字围现象。
浮动元素的字围现象的应用：让图片进行浮动，周围的字进行字围。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

做网页的时候我们应该从从上至下，从外至内进行页面的设计和实现。

浮动只会做水平方向的布局，所以如果我们看到水平方向有多个盒子，第一时间就应该想到浮动。
一般在网页布局中，水平方向我们一般使用标准流来进行布局，水平方向上使用浮动流进行布局。

一般在垂直方向上使用标准流布局，水平方向上使用浮动流布局。

1、在企业开发中什么时候使用标准流什么时候使用浮动流？
垂直方向使用标准流，水平方向使用浮动流。
2、拿到一个很复杂的界面如何入手？
2.1、从上至下布局。
2.2、从外向内布局。
2.3、水平方向可以先划分为一左一右再对左边或者右边进行进一步布局。

浮动元素的高度问题

1、在标准流中，内容的高度可以撑起父元素（盒子）的高度。
2、在浮动流中，一个浮动的元素不能撑起父元素的高度。
只有标准流的高度才能撑起父元素的高度。

清除浮动方式一

1、给前面一个父元素（盒子）设置高度。
注意点：
在企业开发中，能不写高度，我们就不写高度，所以这种方式用的很少。

清除浮动方式二

在不设置高度的情况下，又能够保证第二个盒子中的浮动元素不会去找第一个盒子中的浮动元素。
给后面的浮动元素的父元素（盒子）添加clear属性，这样的话，在没有设置高度的情况下，前面的浮动元素就不会影响后面的浮动元素。
clear属性取值：
none：默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
left：不要找前面的左浮动元素。
right：不要找前面的由浮动元素。
both：不用找前面的左浮动和右浮动元素。
在企业开发中用的最多的是both，既不找左边也不找右边，不用关心前面是左浮动还是右浮动。
注意点：当我们给某个元素添加clear属性之后，那么这个元素的margin属性就会失效。

清除浮动方式三

隔墙法
1、外墙法
在两个盒子中间添加一个额外的块级元素。
给额外添加的块级元素设置clear：both；属性。
注意点：外墙法可以让第二个盒子使用margin-top属性，不可以让第一个盒子使用margin-bottom属性。
2、内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素。
给额外添加的块级元素设置clear：both；属性。
注意点：内墙法可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性。
外墙法和内墙法的区别：
外墙法不能够撑起第一个盒子的高度，内墙法可以撑起第一个盒子的高度。
在企业开发中不常用隔墙法来清除浮动。我们只需要知道隔墙法的格式和需要注意的地方就行，一般我们自己写代码的时候不用这个方式来清除浮动。

上面的代码也是利用内墙发和伪元素来清除浮动的方式。

伪元素选择器

什么是伪元素选择器？
可以找到一个元素，然后在这个标签的内容前面或者后面添加一个子元素，即通过CSS代码给一个指定标签中添加一个子元素，放在内容的开始或者结束。
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。

清除浮动方式5：

补充：如果不想让div中的内容超出div，我们可以使用overflow：hidden；来进行设置。这样，超出div范围的内容就会被剪切掉。
overflow：hidden；作用：
1、可以将超出标签范围的内容剪切掉。
2、清除前面的浮动影响，即清除浮动。它和前面的内墙法清除浮动一样，可以设置第一个盒子的下外边距，可以设置第二个盒子的上外边距。
3、如果我们在一个盒子里面嵌套一个盒子，给里面的盒子设置上外边距的时候，那么两个盒子都会被顶下来。这是一个问题，如果我们想让外面的盒子不一起下来，可以给外面的盒子设置一个边框，或者使用overflow：hidden；属性也可以。

定位流

定位流的分类：
相对定位和绝对定位和固定定位和静态定位。
我们可以使用position属性设置元素的位置。
元素的位置也由顶部，底部，左侧和右侧属性控制。
但是，除非先设置position属性，否则这些属性将不起作用。

static - 布局正常。这是默认值。
relative - 相对于其正常位置定位。
absolute - 相对于其具有非静态位置值的其第一祖先定位。
fixed - 相对于浏览器窗口定位。

相对定位
相对定位元件相对于其正常位置定位。相对值应用顶部，底部，左侧和右侧属性来定位元素相对于静态值（默认布局）下的位置。
相对定位的元素通常用作绝对定位的元素的容器块。

1、相对定位就是相对于自己以前在标准流中的位置来进行上下左右的移动。
2、相对定位是不脱离标准流的，还是会在标准流中占据原来的空间。
3、相对定位中同一个方向上的定位属性只能使用一个，比如使用了left就不要使用right，使用了top就不要使用bottom了。
4、由于相对定位是不脱离标准流的，所以在相对定位中的区分块级元素、行内元素、行内块级元素的。
5、由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin、padding等属性会影响到标准流中其他元素的布局，会在原来的位置上面进行margin\padding的影响。

相对定位应用场景：
1、用于对元素进行微调
2、配合后面学习的绝对定位来使用

绝对定位
什么是绝对定位？
绝对定位将元素相对于具有非静态位置值的最近父亲定位。如果没有这样的元件，则元件相对于主体元素定位。
绝对定位就是默认情况下相对于body来进行定位。
绝对定位的元素从正常流中移除。其他元素的行为就像没有绝对定位元素。绝对定位的元素可以与其他元素重叠。也是需要结合上下左右的属性来进行使用。

1、绝对定位的元素是脱离标准流的。
2、绝对定位元素是不区分块级元素、行内元素、行内块级元素的，设置了绝对定位的元素都可以设置宽度和高度，不单独占据一行。
默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body元素作为参考点。
3、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。
3.1、只要是这个绝对定位元素的祖先元素都可以。
3.2、指的定位流是指绝对定位、相对定位、固定定位。
3.3、定位流中只有静态定位不行。
4、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
注意点：
1、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点。

2、一个绝对定位的元素会忽略祖先元素的padding设置。

子绝父相

相对定位的弊端：
相对定位不会脱离标准流，会继续在标准流中占用一份空间，会影响到标准流中其他元素的布局。
绝对定位弊端：
默认情况下绝对定位的元素会以body作为参考点，会随着浏览器的宽高的变化而变化，绝对定位如果以body作为参考点，该元素会随着浏览器的缩小放大而进行不能预测的变化。
子绝父相
综合一下，子元素用绝对定位，父元素用相对定位。
如果想要元素不占用标准流中的位置，又想让该元素不随浏览器的变化而变化，则可以使用子绝父相的定位方式，即将相对定位和绝对定位进行结合使用。
在我们开发中使用绝对定位和相对定位的时候，大多数情况下就是使用的子绝父相的定位方式。
即子元素使用绝对定位，父元素使用相对定位。

应用：对某些元素进行微调。

绝对定位-水平居中

让绝对定位的子元素在相对定位的父元素中水平居中：（注意：一个绝对定位的元素，他的margin：0 auto水平居中设置会失效，因为绝对定位元素是脱离标准流的），可以使用下面的两布，使一个绝对定位的元素水平居中：
让一个绝对定位的元素水平居中只需要下面两行代码就可以了：
1、left:50%;
2、margin-left：-该元素宽度的一半；（记得取负值）

固定定位
当您使用固定值时，元素将相对于浏览器窗口放置。元素占据相同的位置，即使内容的其余部分向上或向下滚动。固定元素从正常流中移除。固定定位的元素可以与其他元素重叠。即固定定位的元素不占据正常流中的位置。可以和其他的元素重叠。文档和其他元素的行为就像固定定位元素不存在。

固定定位是脱离标准流的，不会占用标准流中的位置。也就是说固定定位的元素是不区分块级、行内、行内块级元素的。
固定定位的元素不随着滚动条的滚动而滚动。
静态定位
静态定位元素不受顶部，底部，左侧和右侧属性的影响。即给静态定位的元素设置上下左右属性是没有效果的，不给静态定位的元素设置这几个值。静态定位元素根据页面的正常流动定位。

定位流-z-index属性

什么是z-index属性？
默认情况下所有的元素都有一个默认的z-index属性，取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的。
1、默认情况下定位流的元素会盖住标准流中的元素。
2、默认情况下后面编写的定位流元素会盖住前面编写的定位栏元素。
3、如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面。
注意点：
1、从父现象：
1.1、如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面。
1.2、如果两个元素的父元素都设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面。
只有具有定位流的元素才能设置z-index属性哈。

总结

在网页布局中，水平方向一般使用标准流进行布局，水平方向上可以使用浮动流进行布局，对于某一些小地方的微调可以使用定位的方式进行微调处理，达到我们想要的结果。在整个网页上都可以应用盒子模型。

在网页中，如果看到了有这种盖住某一个地方的小东西，我们首先要想到的就是定位流，想到定位流，我们首先要想到的就是子绝父相的定位方式。