CSS网页布局方式--浮动流、定位流

网页布局方式定义：

• 网页的布局方式就是浏览器如何对网页中的元素进行排版

主要分三种

• 标准流
• 浮动流
• 定位流

标准流（文档流/普通流）排版

• 定义：浏览器默认的排版方式
• 在css中元素分三类：行内元素、块级元素以及行内块级元素
• 标准流中分两种排版方式
  
  • 垂直排版：元素是块级元素
  • 水平排版：行内元素及行内块级元素

浮动流排版float

• 作用：可以实现文字环绕效果
• 一种“半脱离标准流”的排版方式
• 只有一种水平排版方式，只能设置某个元素左对齐或右对齐
• 特点：
  
  • 浮动流中不区分行内元素/块级元素/行内块级元素，无论哪种元素都可以进行水平排版
  • 在浮动流中无论是行内元素/块级元素/行内块级元素都可以进行宽高设置
  • 综上所述，浮动流中的元素和标准流中的行内块级元素很像
• 注意点：
  
  • 浮动流中没有居中对齐
  • 浮动流中不可以使用margin: 0 auto;的，这是无效的

浮动元素的脱标

• 定义：脱离标准流
  
  • 当某一个元素浮动之后，这个元素看上去像似被从标准流中删除了一样
• 浮动元素脱标之后的影响
  
  • 如果前面一个元素浮动了，而后面一个元素没有浮动，那么这时前面的一个元素就会覆盖后面的一个元素

浮动元素排序规则

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

浮动元素贴靠现象

• 当父元素的宽度足够放下所有浮动元素时，它就会并列显示，当宽度不足够放下所有元素时，会从最后一个元素开始往前面的元素贴，直到贴到父元素的左边位置，此时不管父元素的宽度够不够，都会显示在父元素的位置。

浮动元素字围效果

• 当前一个元素浮动了，后面一个元素没有浮动，后面一个元素中的文字会紧贴前面一个元素显示。
• 浮动元素不会盖住没有浮动元素中的文字，没有浮动的元素会给浮动元素让位置

重点：

• 在以后的企业开发中，一般在整体网页垂直方向上采用标准流布局，水平方向上采用浮动流布局
• 面对一个很复杂的界面时，遵循从上到下，由外到内的布局顺序，水平方向上可以根据从左到右的顺序

浮动元素高度的问题

• 在标准流中内容的高度可以撑起父元素的高度
• 在浮动流中浮动的元素不可以撑起父元素的高度

清楚浮动的方式

清楚浮动方式一

• 给前面一个父元素设置高度
• 注意：
  
  • 在企业开发中能不写高度就不写高度，所以这种方法用的很少

清楚浮动方式二

• 给后面的元素添加clear属性
• clear属性取值：
  
  • none:默认取值，按照浮动元素的排序规则（左浮动找左浮动，右浮动找右浮动）
  • left：不要找前面的左浮动元素
  • right：不要找前面的右浮动元素
  • both：不要找前面的左浮动和右浮动元素
• 注意点：
  
  • 当给某个元素添加clear属性之后，那么这个元素的margin属性就会失效
  • 这里margin为啥会失效？（留个疑问）

清楚浮动方式三

• 隔墙法
• 外墙法
  
  • 在两个盒子中间添加一个额外的块级元素
  • 给这个额外添加的元素添加clear:both;属性
• 注意：
  
  • 可以让第二个盒子使用margin-top属性
  • 不可以让第一个盒子使用margin-bottom属性
  • 在企业开发中用外墙法直接给这个额外的元素添加高度就可以了，不用给第二个元素加margin-top属性
• 内墙法
  
  • 在第一个盒子所有子元素最后添加一个额外的块级元素
  • 给这个额外添加的块级元素设置clear:both;属性
• 注意点
  
  • 可以让第二个盒子使用margin-top属性
  • 可以让第一个盒子使用margin-bottom属性

外墙法和内墙法的区别：

• 外墙法可以让第一个盒子设置margin-bottom属性，内墙法不可以
• 外墙法不能撑起第一个盒子的高度，内墙法可以

在企业开发中不常用隔墙法来清楚浮动

伪元素选择器

• 作用：给指定标签的内容前面添加一个子元素或者给指定标签的后面添加一个子元素
• 格式
  
  • 给指定标签前面添加一个子元素

标签名称：：before{
    属性名称：值
}

• 给指定标签后面添加一个子元素

标签名称：：after{
    属性名称：值
}

例如：

div::after {
    /*指定添加的子元素中存储的内容*/
    content:"test";
    /*指定添加的子元素的宽度和高度*/
    width:50px;
    height:0px;
    /*指定添加的子元素的显示模式*/
    display:block;
    /*隐藏添加的子元素*/
    visibility:didden;
}

清除浮动的方式四 （最推荐使用）

• 用伪元素选择器和内墙法结合使用来给元素清除浮动
• 例如：

.box1::after{
    /*设置添加的子元素内容为空*/
    content:"";
    /*设置添加的子元素为块级元素*/
    display:block;
    /*设置添加的子元素高度为0*/
    height:0px;
    /*设置添加的子元素内容隐藏*/
    visibility:hidden;
    /*给添加的子元素设置clear:both;属性*/
    clear:both;
}
.box1 {
    /*用来兼容IE6*/
    *zoom:1;
}

清除浮动方式五

• 通过overflow:hidden;来清除浮动
• overflow作用：
  
  • 将超出标签范围的内容拆剪掉
  • 清除浮动
  • 可以通过overflow:hidden;让里面的盒子设置margin-top之后，外面的盒子不被顶下来
• overflow:auto;作用
  
  • 如果包含图片的元素的高度没有图片高，而且它是浮动的，可以使用overflow:auto;来清除浮动

定位流排版

• static,relative,absolute,fixed

默认定位

• 该关键字指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

相对定位position:relative

• top,right,bottom,left
• 概念：相对于自己以前在标准流中的位置来移动
• 注意点：
  
  • 不脱离标准流，会继续在标准流中占用一份空间
  • 需要结合top/right/bottom/left属性来使用，但是一个方向上的定位属性只能使用一个
  • 由于相对定位是不脱离标准流的，所以相对定位是区分块级元素，行内元素以及行内块级元素的
  • 相对定位不脱离标准流，并且相对定位会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性时会影响标准流的布局
• 相对定位应用场景
  
  • 对元素进行微调
  • 配合后面学习的绝对定位使用
• 相对定位弊端
  
  • 相对定位不会脱离标准流，会继续在标准流中保留一份空间，所以不利于布局

绝对定位position:absolute

• 概念：相对于body来定位
• 注意点：
  
  • 脱离标准流
  • 绝对定位的元素不区分块级元素，行内元素以及行内块级元素
• 规律：
  
  • 默认情况下，所有的绝对定位元素无论有没有祖先元素，都会以body作为参考
  • 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点
  • 只要是这个绝对定位元素的祖先都可以
  • 指的定位流是指绝对定位/相对定位/固定定位
  • 定位流中只有静态定位不行
  • 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且有多个祖先元素都是定位流，那么这个绝对定位元素会以离它最近的元素作为参考点

绝对定位注意点

• 如果一个绝对定位是以body作为参考点，那么其实是以网页首屏的宽度和高度为作为参考点，而不是以整个网页的高度和宽度为参考点
• 一个绝对定位的元素会忽略祖先元素的padding
• 绝对定位弊端
  
  • 默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化

相对定位与绝对定位结合使用

• 子绝父相：子元素用绝对定位，父元素用相对定位

绝对定位的元素水平居中

• 只需设置绝对定位元素的left：50%,然后再设置margin-left:- 元素宽度的一半;

固定定位position:fixed

• top,right,bottom,left
• 概念：
  
  • 固定定位可以让某个盒子不随着滚动条的滚动而滚动。
• 注意点：
  
  • 固定定位的元素是脱离标准流的，不会占用标准流中的空间
  • 固定定位和绝对定位一样不区分行内/块级/行内块级

静态定位

z-index属性

• 概念：默认情况下所有的元素都有一个z-index属性，取值为0；
• 作用：专门用于控制定位流元素的覆盖关系
• 1、默认情况下定位流的元素会覆盖标准流的元素
• 2、默认情况下定位流的元素后面编写的会覆盖前面编写的
• 3、如果定位流的元素设置了z-index属性，那么谁的z-index属性值大，谁就显示在上面

注意点

• 从父现象
  
  • 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面
  • 如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面

学了这么多知识点来做个练习消化消化吧百度前端学院_小薇课堂_task_4
可参看下面的两篇文章，夯实基础
系统学习前端之HTML基础
系统学习前端之CSS基础