HTML浮动总结

（四）CSS 浮动

1. 浮动（float）

1.1 传统网页布局方式

网页布局的本质——用 CSS 来摆放盒子，把盒子放到相应位置。

CSS 提供了三种传统布局方式：

• 普通流
• 浮动
• 定位

1.2 标准流（普通流/文档流）

所谓的标准流，就是标签按照规定好的默认方式排列。

1. 块级元素会独占一行，从上到下顺序排列
   常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
   常用元素：span、a、i、em

标准流是最基本的布局方式。

以上三种方式都是来摆放盒子的，盒子摆到合适位置，布局自然就完成了。

实际开发中，一个页面基本包含三种布局方式。

1.3 为什么需要浮动？

很多布局效果，标准流没办法完成，此时就可以利用浮动完成布局。浮动可以改变元素标签默认排列方式。

浮动最典型应用：让多个块级元素一行显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素找浮动。

网页布局第二准则：先设置盒子大小，再设置盒子位置。

1.4 什么是浮动？

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

语法

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

1.5 浮动特性（重点）

加了浮动之后的元素，会具有一些特性。

1. 浮动元素会脱离标准流
2. 浮动元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

重要特性

1. 脱离文档流的控制（浮）移动到指定位置（动），脱标
   脱离文档流的盒子，会漂浮在文档流的盒子上面，不占位置。

2. 如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且顶端对齐排列。
   浮动的元素是相互贴在一起的（没有间隙），若父级宽度放不下盒子，多出的盒子会另起一行对齐。

3. 浮动元素具有行内块元素特性。
   任何元素都可以浮动，设置了后元素都具有行内块元素性质。

   • 若块级元素没有设置宽度，则默认和父级一样宽
   • 浮动盒子中间无间隙，紧挨着
   • 行内块元素同理

1.6 浮动元素经常和标准流父级元素搭配使用

为了约束元素位置，一般采取：

先用标准流父元素上下排列位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

2. 常见网页布局

1. 浮动和标准流的父盒子搭配

   先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

2. 一个元素浮动了，理论上其余兄弟元素也要浮动

   一个盒子里有多个盒子，其中一个盒子浮动，其他兄弟也应该浮动，防止引起问题。

   浮动的盒子只会影响浮动盒子后面的标准流，不会引起前面的标准流。

3. 清除浮动

3.1 为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度，当时盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响。

3.2 清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身具有高度，则不需要清除浮动
• 清除浮动之后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

3.3 清除浮动

语法：

选择器: {
  clear: 属性值;
}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动

清除浮动策略：闭合浮动

方法：

1. 额外标签法（隔墙法），是 W3C 推荐的方法
2. 父级添加 overflow 属性
3. 父级添加 after 伪元素
4. 父级添加双伪元素

3.4 清除浮动（1）——额外标签法

也成为隔墙法，是 W3C 推荐的方法。

额外标签法是在最后一个浮动元素末尾添加一个 空块级元素，给其赋以属性 clear:both;。

<style>
  clear: both;
</style>
<div class="clear"></div>

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化差

总结

1. 清除浮动的本质

   清除浮动的本质是清除浮动元素脱离标准流造成的影响

2. 清除浮动的策略

   闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

3. 使用场景

   实际开发中可能会遇到，但是不常用。

3.5 清除浮动（2）——父级添加 overflow

可以给父级添加 overflow 属性，将其属性设置为 hidden、auto或scroll。

注意是给父元素添加代码：

• 优点：代码简洁
• 缺点：无法显示溢出部分

3.6 清除浮动（3）——:after 伪元素法

实际上也是额外标签法的一种。

.clearfix {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}

3.7 清除浮动（4）——双伪元素法

语法

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

• 优点：代码更简洁
• 缺点：照顾低版本浏览器
• 代表网站：小米、腾讯

3.8 清除浮动总结

为什么需要清除浮动？

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，应该清除浮动。

4. PS 切图

4.1 常见的图片格式

1. JS 图像格式：JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用到 jpg 格式的。
2. gif 图像格式，GIF 格式最多只能存储 256 色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际上经常用于一些图片小动画效果。
3. png 图像格式是一种新兴的网络图形格式，结合了 GIF 和 JPEG 的特点，具有存储形式的特点，能够保存透明背景。如果想要切成背景透明的图片，请先择 png 格式。
4. PSD 图像格式是 Photoshop 的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点是我们可以上面复制文字，获得图片，还可以测量大小和距离。

4.2 图层切图

最简单的切图方式：鼠标点击设置为移动工具->点击图层->快速导出为 PNG。

4.3 合并图层

但是很多情况下，需要合并图层并导出：

1. 按住 shift 选中需要合并的图层：图层菜单->合并图层（Ctrl+E）
2. 右击->快速导出为 PNG

最好的方法是：与美工设计沟通。

4.4 切片切图

1. 利用切片工具手动划出切片范围

   若要切出透明 logo.png，则需要将图层下拉至最下面，然后点击小眼睛使背景消失。

2. 文件菜单->导出->存储为 web 设备所用格式->选择我们要的图片格式->存储。

4.5 PS Cutterman 插件切图

Cutterman 是一款在 PS 中的插件，能够自动将你需要的图层进行输出，以替代传统的手动“导出为 web 所用格式”以及使用切片工具进行挨个切图的繁琐流程。

5. 学成在线案例

5.1 准备素材和工具

5.2 结构与样式分离

5.3 CSS 属性书写顺序（重点）

1. 布局定位属性
2. 自身属性
3. 文本属性
4. 其他属性

5.4 开始

1.定版心

.w {
  margin: 1200px auto;
}

2.导航栏注意点：

实际开发中，不会直接用链接 a 而是用 li 包含链接（li+a）的做法。

1. li+a 语义更清晰，一看就是有条理的列表型内容。

2. 如果直接用 a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

3. 让导航栏一行显示，给 li 加浮动，因为 li 是块级元素，需要一行显示。

4. 这个 nav 导航栏可以不给宽度，将来可以继续添加其余文字。

5. 因为导航栏里面文字不一样多，所以最好给链接 a 左右 padding 撑开盒子，而不是指定宽度。

6. 浮动的盒子不会有外边距合并的问题.