CSS 第 04 天 —— 浮动

1. 案例总结

1. 开发步骤

   1. 分析页面结构（如果内容太多，可以后续补充）

   2. 编写公共样式

   3. 从上向下从第一个大盒子开始

      1. 最外侧盒子需要有注释，辅助 CSS 分段和阅读

   4. 从上向下，从左向右依次编写小盒子样式，直到一个大盒子完成

   5. 如果小盒子

      比较复杂

      可以：

      1. 开始前增加背景颜色辅助调试
      2. 结束后删除背景颜色

2. 分隔线的实现技巧

   • 使用 padding 可以让分割线比文本长

3. 取消无序列表的小圆点：list-style: none;

4. 列选择快捷键 ctrl + alt + shift + ↑ / ↓

5. 布局时务必要注意 padding 和 border 会对影响盒子大小

2. 边框和阴影

2.1 边框 border-radius:

圆角矩形：高度的一半

圆形：border-radius；

四个值：border-radius: 10px 20px 30px 40px; 左上 → 右上 → 右下 → 左下（顺时针）

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

两个值:border-radius: 10px 20px ,左上右下 右上左下

2.2 盒子阴影 box-shadow：属性值

盒子阴影不会影响盒子大小。

2.3 文字阴影 text-shadow:属性值

3. 浮动基础

3.1 传统网页布局三种方式

• 标准流（文档流）
• 浮动
• 定位

标准流（文档流）是如何布局的？

• 标签按照规定好的默认方式排列（块级元素、行内元素）；
• 标准流是最基本的布局方式。

3.2 浮动能解决什么问题？

1. 让多个块级元素（不改变显示方式）水平排成一行
2. 让两个块级元素一个左对齐，一个右对齐

• 网页布局的准则是什么？
  1. 多个块级元素纵向排列 —— 标准流
  2. 多个块级元素横向排列 —— 浮动

3.3 浮动的概念:

float属性用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：float：left/right/none

元素浮动后具三个特性:

1. 脱离标准流（脱标）
   • 行内元素同样可以使用浮动
   • 行内元素浮动之后可以直接指定宽高
   • 行内元素浮动之后可以指定宽高，不再需要转换显示模式
   • 如果没有给块级盒子设置宽度，默认宽度是父级盒子浮动之后宽度由内容来决定
2. 一行显示并且顶部对齐
3. 具有行内块元素的特性

3.4 浮动元素经常搭配标准流的父元素

标准流的父盒子负责:

• 标准流的父盒子排列上下位置
• 这样标准流父盒子可以约束浮动的子盒子，按照我们布局要求在父盒子内排列

浮动的子盒子负责:

• 浮动的子盒子负责在父盒子中横向排列
• 里面填写内容

3.5 浮动小结

1. 应用场景：与标准流的父盒子搭配使用
   1. 标准流父盒子负责上下
   2. 浮动子盒子负责左右
   3. 内容套在子盒子内部，子盒子最好不要既负责布局，又要负责内容
2. 浮动的元素会脱标 —— 下方的盒子会占据原有的位置
   1. 父盒子中的所有亲儿子盒子一起浮动
3. 浮动相比较 inline-block 的优势
   1. 没有缝隙，可以精确控制盒子之间的距离
   2. 顶端对齐（inline-block 会按照文字对齐方式对齐）
4. 初学浮动布局的痛点
   1. 务必要控制好每个盒子的宽度，宽度不够会掉下去
   2. 用调试工具检查盒子位置最靠谱，千万不要盯着代码看
   3. * {margin: 0; padding: 0} 不要忘

3.6 浮动的两个注意点

1. 子浮父不浮
2. 兄弟一起浮

5. 清除浮动

5.1 如果子盒子全部浮动，父盒子的高度不能被撑开，盒子浮动后，会脱标，一旦脱标，原有位置不再保留。

• 为什么要清除浮动（面试题）？
  • 如果在开发时，不方便给父盒子指定高度，子盒浮动后（脱标），不占有原有位置，导致父盒子高度为 0，最终影响到下方的盒子

5.2清除浮动本质以及额外标签法

清除浮动的本质:

• 清除浮动元素脱标后造成的影响
• 清除浮动后，父盒子可以根据浮动的子盒子自动检测高度，父盒子有了高度，就不会对下方的标准流造成影响了。

额外标签法使用方法:

• 在浮动元素末尾添加一个空的 div
• 设置该 div 的样式为 clear: both;

5.3 清除浮动之父元素 overflow

1、给父元素添加 overflow 属性，将其属性设置为 hidden、auto、scroll 都可以；

2、通常设置 overflow: hidden；

5.4清除浮动之 after 伪元素」

.clearfix::after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}
.clearfix{
  *zoom:1    /*i6 i7能清除浮动*/
}

5.5 清除浮动之双伪元素

• .clearfix::before,
  .clearfix::after {
    content: '';
    display: table;
  }
  
  .clearfix::after {
    clear: both;
  }
  .clearfix{
    *zoom:1    /*i6 i7能清除浮动*/
  }