0基础快速入门CSS技术栈（6）—图解详细阐述说透CSS的浮动及应用、浮动的扩展及清除浮动和详解快速·1photoshop切图（附详细案例源码解析过程）2021-01-07更新

最新推荐文章于 2021-01-12 20:25:34 发布
最新推荐文章于 2021-01-12 20:25:34 发布
阅读量596 收藏
点赞数
分类专栏： # CSS 0基础快速入门 CSS学习手册 文章标签： css ps切图 浮动 清除浮动 photoshop切图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/107621772
版权

文章目录

1. 浮动(float)重点提炼

  • CSS 的布局的三种机制

  • 普通流在布局中的特点

  • 为什么用浮动

  • 为什么要清除浮动

  • 应用

    • 利用浮动完成导航栏案例
    • 清除浮动
    • 使用PS切图工具

主要目的：布局页面

2. CSS 布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子，页面实际就是由很多盒子组成的。

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

  1. 普通流（标准流）

    • 块级元素会独占一行，从上向下顺序排列；
      • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
    • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行（像水一样，没有固定形状，随意流动）；
      • 常用元素：span、a、i、em等

    如：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			height: 100px;
			background-color: pink;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<div>123</div>
	<div>abc</div>
	<span>行内元素</span>
	<span>行内元素</span>
	<span>行内元素</span>
	<span>行内元素</span>
	<span>行内元素</span>
	<span>行内元素</span>
	<span>行内元素</span>
	<span>行内元素</span>
	<span>行内元素</span>
</body>
</html>

    image-20200727111047321

    行内元素：碰到父元素边缘则自动换行（像水一样，没有固定形状，随意流动）。

    image-20200727111130249

    参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.72
    Branch： branch02

    commit description：a0.72（ CSS布局三种机制——普通（标准）流demo）

    tag：a0.72

  2. 浮动

    • 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

  3. 定位

    • 将盒子定在浏览器的某一个位置——CSS离不开定位，特别是后面的js特效。

3. 为什么需要浮动？

思考题：

我们首先要思考以下2个布局中最常见的问题？

  1. 如何让多个盒子(div)水平排列成一行？

在这里插入图片描述

  1. 如何实现盒子的左右对齐？

在这里插入图片描述

3.1 example01

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

image-20200727111934607

改成一行：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      div {
         display: inline-block;
         width: 200px;
         height: 200px;
         background-color: pink;
      }
      .two {
         background-color: purple;
      }
   </style>
</head>
<body>
   <div></div>
   <div class="two"></div>
   <div></div>
</body>
</html>

image-20200727112532812

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.73
Branch： branch02

commit description：a0.73（为什么需要浮动——example01标准流缺陷）

tag：a0.73

虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷：

  1. 它可以实现多个元素一行显示，但是中间会有空白缝隙（很难去掉，就算去掉后，但是兼容性极差。），不能满足以上第一个问题。

    image-20200727113239106

    这种虽然有间隙，但是都是经过计算留的，首先肯定得去掉默认间隙（或者知道默认间隙，根据不同浏览器也不同），才能再统一加新的间隙。

    image-20200727113431573

  2. 它不能实现以上第二个问题，盒子左右对齐

    image-20200727113445639

总结

因为一些网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。

4. 什么是浮动(float)

概念：元素的浮动是指设置了浮动属性的元素会

  1. 脱离标准普通流的控制
  2. 移动到指定位置。

4.1 作用

  1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
  2. 可以实现盒子的左右对齐等等…
  3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

在这里插入图片描述

4.1.1 example02

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img {
			margin: 10px;
		}
	</style>
</head>
<body>
	1993年，在古装片《战神传说》中扮演一个武功超群的渔民；同年，主演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高明的千门高手钱文迪；此外，他还主演了爱情片《天长地久》，在片中塑造了一个风流不羁的江湖浪子形象。

1994年，刘德华投资并主演了剧情片《天与地》，在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年，主演赛车励志片《烈火战车》，在片中饰演叛逆、倔强的阿祖，并凭借该片获得第15届香港电影金像奖最佳男主角提名；同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。
<img src="images/img.jpg" alt="">
1996年，主演黑帮题材的电影《新上海滩》，在片中饰演对冯程程痴情一片的丁力。1997年，担任剧情片《香港制造》的制作人；同年，主演爱情片《天若有情之烽火佳人》，在片中饰演家世显赫的空军少尉刘天伟；12月，与梁家辉联袂主演警匪动作片《黑金》，在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年，主演动作片《龙在江湖》，饰演重义气的黑帮成员韦吉祥；同年，出演喜剧片《赌侠1999》；此外，他还担任剧情片《去年烟花特别多》的制作人。
1993年，在古装片《战神传说》中扮演一个武功超群的渔民；同年，主演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高明的千门高手钱文迪；此外，他还主演了爱情片《天长地久》，在片中塑造了一个风流不羁的江湖浪子形象。

1994年，刘德华投资并主演了剧情片《天与地》，在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年，主演赛车励志片《烈火战车》，在片中饰演叛逆、倔强的阿祖，并凭借该片获得第15届香港电影金像奖最佳男主角提名；同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。


1996年，主演黑帮题材的电影《新上海滩》，在片中饰演对冯程程痴情一片的丁力。1997年，担任剧情片《香港制造》的制作人；同年，主演爱情片《天若有情之烽火佳人》，在片中饰演家世显赫的空军少尉刘天伟；12月，与梁家辉联袂主演警匪动作片《黑金》，在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年，主演动作片《龙在江湖》，饰演重义气的黑帮成员韦吉祥；同年，出演喜剧片《赌侠1999》；此外，他还担任剧情片《去年烟花特别多》的制作人。
</body>
</html>

因为图片是行内块元素，图片独占一行，所以非常难看。

image-20200727114100771

但是我们想要文字环绕图片，就用到浮动了。

		img {
			/*左浮动*/
			float: left;
			margin: 10px;
		}

image-20200727114525501

			img {
			float: right;
			margin: 10px;
		}

image-20200727114611208

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.74
Branch： branch02

commit description：a0.74（为什么需要浮动——example02：02-浮动最早做文字环绕效果）

tag：a0.74

4.2 语法

在 CSS中，通过 float 中文， 浮 漏 特 属性定义浮动，语法如下：

选择器 { float: 属性值; }
属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动

4.2.1 1). 浮动口诀之 浮

浮动——浮浮浮~~~漂浮在普通流的上面。 脱离标准流。 俗称 “脱标”

在这里插入图片描述

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

小结：

  • float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。
4.2.1.1 example03
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动口诀之浮</title>
	<style>
		.one {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two {
			width: 300px;
			height: 300px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

image-20200727115056246

		.one {
			/*不是标准流了， 漂浮起来， 浮在 标准流的上面*/
			float: left;
			width: 200px;
			height: 200px;
			background-color: pink;
		}

粉红色盒子在紫色盒子上边了，实际就是粉红色盒子压住了紫色的盒子了。实际此时不是标准流了， 漂浮起来， 浮在标准流的上面。

image-20200727115205642

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.75
Branch： branch02

commit description：a0.75（为什么需要浮动——example03：03-浮动口诀之浮漏）

tag：a0.75

4.2.2 2). 浮动口诀之 漏

浮动——漏漏漏~ 浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    /* 让第 1 个盒子漂浮起来，不占位置 */
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

所以，box2下面的其实就是跑到box1盒子下面了， 被box1给压住了，遮挡起来了

来来来，我们看个立体图
在这里插入图片描述

4.2.3 3). 浮动口诀之 特

浮动——特性 float属性会改变元素display（三种：块级、行内、行内块）属性。

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

生成的块级框和我们前面的行内块极其相似。

体验案例——div 水平排列

div {

    width: 200px;

    height: 200px;

    background-color: pink;

    /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */

    /* display: inline-block; */

    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */

    float: left;
}

.two {

    background-color: hotpink;

}

在这里插入图片描述

注意： 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐

4.2.3.1 example04
4.2.3.1.1 example04-1
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动口诀之特</title>
	<style>
		div {
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>
		天王盖地虎，小鸡炖蘑菇
	</div>
</body>
</html>

image-20200727123344466

给盒子添加浮动，看看效果：

		div {
			float: left;
			height: 100px;
			background-color: pink;
		}

这个盒子div添加浮动之后，不再是 块级元素默认相当于类似转换为了inline-block

image-20200727123440400

我们要是没有给div中加入文字，设置浮动了以后，浏览器是一片空白。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.76
Branch： branch02

commit description：a0.76（为什么需要浮动——浮动口诀之 特example04-1-浮动display）

tag：a0.76

4.2.3.1.2 example04-2

实现多个盒子水平排列成一行，中间不能有间隙。

普通标准流

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动口诀之浮</title>
	<style>
		.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two {
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

image-20200727124314771

		.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.one {
			float: left;
		}
		.two {
			background-color: purple;
		}

因为第一个元素浮动了，第二个元素跑上去则把它盖住了。

image-20200727124440762

		.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.one {
			float: left;
		}
		.two {
			background-color: purple;
			float: left;
		}

两者都设置成浮动，而又是行内块，则都在一行上显示了。注意它仅仅类似行内块，因为中间是没有间隙的。即

浮动元素默认之间没有缝隙 和真正的行内块有区别。

image-20200727124635257

加上第三个盒子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动口诀之浮</title>
	<style>
		 /*浮动元素默认之间没有缝隙 和真正的行内块有区别*/
		.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.one {
			float: left;
		}
		.two {
			background-color: purple;
			float: left;
		}
		.three {
			width: 200px;s
			height: 200px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>
</html>

因为第三个盒子是普通标准流，因此必然跑到第二个盒子的下面被盖住了。

image-20200727124635257

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动口诀之浮</title>
	<style>
		 /*浮动元素默认之间没有缝隙 和真正的行内块有区别*/
		.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.one {
			float: left;
		}
		.two {
			background-color: purple;
			float: left;
		}
		.three {
			float: left;
			width: 200px;
			height: 200px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>
</html>

image-20200727125051225

如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。

image-20200727125316879

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.77
Branch： branch02

commit description：a0.77（为什么需要浮动——浮动口诀之 特example04-2-实现多个盒子水平排列成一行，中间不能有间隙。）

tag：a0.77

4.2.3.1.3 example04-3

实现盒子的左右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动口诀之浮</title>
    <style>
        /*浮动元素默认之间没有缝隙 和真正的行内块有区别*/
        .one,
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .one {
            float: left;
        }
        .two {
            background-color: purple;
            float: left;
        }
        .three {
            float: right;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>

image-20200727125600664

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.78
Branch： branch02

commit description：a0.78（为什么需要浮动——浮动口诀之 特example04-3-实现盒子的左右对齐）

tag：a0.78

5. 浮动(float)小结

我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式

float —— 浮漏特

特点说明
浮加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

大部分官网都是如此：

image-20200727125953780

6. 浮动(float)的应用（重要）

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

我们知道，浮动是脱标的，会影响下面的标准流元素。

此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。

小结：

一个完整的网页，是 标准流 + 浮动 + 定位 。

6.2 浮动应用案例

经常需要此种形式的布局，类似如下，但是浮动的元素，是不占有位置的，那么下面的那个盒子怎么设置呢？

image-20200727130828470

我们可以给上面的盒子外层套一个父亲。

image-20200727131033570

实际很多官网都是这样设置的。

image-20200727131421917

6.2.1 example05

小米案例

mii

我们可以划分为三个盒子，并且注意它们之间是有间隙的。我们可以设置margin-right，但是第三个盒子的最后一列元素，会出问题，那是因为我们都是设置好对齐的，这样会影响最右侧的对齐问题。我们再试着倒着来，因此第三个盒子里设置margin-left是最合适的。

6.2.1.1 example05-1

做浮动的时候宽度必须精细否则会严重影响效果的，此时我们可以借助ps工具的辅助线进行测量。

image-20200727135330517

辅助线从顶部和左侧刻度尺是一拉就出来了（如果线拉多了，再放回去就可以了），再用选框工具即可。

宽度：1226px

高度：615px （稍有1像素左右误差无所谓）

image-20200727135830119

最里面内嵌的盒子，左侧设置为div，右侧用li（通常看到一排排很整齐的块，一般都用无序列表来做）

左侧div设置234px，高度同父亲

image-20200727140650904

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米案例练习</title>
	<style>
		/*清除元素默认内外边距样式*/
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 1226px;
			height: 615px;
			background-color: pink;
			/*盒子居中对齐*/
			margin: auto;
		}
		.left {
			width: 234px;
			height: 615px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">
		</div>
		<ul class="right">
		</ul>
	</div>
</body>
</html>

image-20200727141015536

右侧width可以计算出来：1226-234=992

		.right {
			width: 992px;
			height: 615px;
			background-color: skyblue;
		}

image-20200727141300661

以上是标准流，我们设置成浮动，一个左浮动，一个右浮动

		.left {
			float: left;
			width: 234px;
			height: 615px;
			background-color: purple;
		}
		.right {
			float: right;
			width: 992px;
			height: 615px;
			background-color: skyblue;
		}

image-20200727141442258

注意： 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。因此宽度必须要极为精细。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.79
Branch： branch02

commit description：a0.79（为什么需要浮动——小米案例example05-1-框子实现）

tag：a0.79

6.2.1.2 example05-2

测量一下li

宽度234px

image-20200727143515837

高度300px

image-20200727143621900

再测量间隙：14px

image-20200727143850997

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米案例练习</title>
	<style>
		/*清除元素默认内外边距样式*/
		* {
			margin: 0;
			padding: 0;
		}
		/*清除列表样式 前面的小点点*/
		li {
			list-style: none;
		}
		.box {
			width: 1226px;
			height: 615px;
			background-color: pink;
			/*盒子居中对齐*/
			margin: auto;
		}
		.left {
			float: left;
			width: 234px;
			height: 615px;
			background-color: purple;
		}
		.right {
			float: right;
			width: 992px;
			height: 615px;
			background-color: skyblue;
		}
		.right li {
			float: left;
			width: 234px;
			height: 300px;
			background-color: pink;
			margin-left: 14px;
			margin-bottom: 14px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">
		</div>
		<ul class="right">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</div>
</body>
</html>

image-20200727144058879

我们暂时只加一个左侧图，右侧就不弄了，因为比较复杂。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米案例练习</title>
	<style>
		/*清除元素默认内外边距样式*/
		* {
			margin: 0;
			padding: 0;
		}
		/*清除列表样式 前面的小点点*/
		li {
			list-style: none;
		}
		.box {
			width: 1226px;
			height: 615px;
			background-color: pink;
			/*盒子居中对齐*/
			margin: auto;
		}
		.left {
			float: left;
			width: 234px;
			height: 615px;
			background-color: purple;
		}
		.left img {
			/*width: 234px;*/
			width: 100%;
		}
		.right {
			float: right;
			width: 992px;
			height: 615px;
			background-color: skyblue;
		}
		.right li {
			float: left;
			width: 234px;
			height: 300px;
			background-color: pink;
			margin-left: 14px;
			margin-bottom: 14px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">
			<img src="images/mi.jpg" alt="">
		</div>
		<ul class="right">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</div>
</body>
</html>

image-20200727144320687

小结：做此种样式，一定要加标准流的父亲，设置左浮动和右浮动，一定要注意宽度不能够超过父亲，否则子浮动会掉下来。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.80
Branch： branch02

commit description：a0.80（为什么需要浮动——小米案例example05-2-最终实现）

tag：a0.80

6.2.2 导航栏案例

在这里插入图片描述

6.2.2.1 example06
6.2.2.1.1 example06-1

我们分析一下主要两个大盒子组成。

image-20200727145227599

我们现在开始量尺寸

image-20200727145938704

760x150px

image-20200727150109091

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.banner {
			width: 760px;
			height: 150px;
			background-color: pink;
			/*居中对齐*/
			margin: auto;
		}
	</style>
</head>
<body>
	<!-- banner 是广告条的 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="">
	</div>
</body>
</html>

image-20200727150314911

我们再测量下半部：

只需测量高度即可=>32px

image-20200727150519915

如果图片是充满的，我们可以直接查图片属性。

image-20200727150648427

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.banner {
			width: 760px;
			height: 150px;
			/*居中对齐*/
			margin: auto;
		}
		.nav {
			width: 760px;
			height: 32px;
			/*居中对齐*/
			margin: 0 auto;
			background: url(images/nav_bg.jpg) repeat-x;
		}
	</style>
</head>
<body>
	<!-- banner 是广告条的 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="">
	</div>
	<!-- nav 导航栏部分  -->
	<!-- 以后我们重要的导航栏，都要采取 li 包含a 的写法 -->
	<div class="nav">
	</div>
</body>
</html>

image-20200727151713402

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.81
Branch： branch02

commit description：a0.81（为什么需要浮动——导航栏案例example06-1-框子实现）

tag：a0.81

6.2.2.1.2 example06-2

实现导航栏

之前我们做的导航栏直接放a标签，实际不太好，一般都是用li包含a标签的做法。

注意，实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。

  1. li+a 语义更清晰，一看这就是有条理的列表型内容。
  2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

如：小米官网

image-20200727152314496

淘宝：

image-20200727152352621

但是不是所有的导航都是这种形式，如网页最下角：这些信息不是很重要，因此直接使用a标签即可。

image-20200727152533858

编辑器通过element语法快速写html后，如果再同样的标签写同样的内容，可以按住鼠标滚轮往下拖动即可。

image-20200727152855299

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.banner {
			width: 760px;
			height: 150px;
			/*居中对齐*/
			margin: auto;
		}
		.nav {
			width: 760px;
			height: 32px;
			/*居中对齐*/
			margin: 0 auto;
			background: url(images/nav_bg.jpg) repeat-x;
		}
	</style>
</head>
<body>
	<!-- banner 是广告条的 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="">
	</div>
	<!-- nav 导航栏部分  -->
	<!-- 以后我们重要的导航栏，都要采取 li 包含a 的写法 -->
	<div class="nav">
<!--		ul>li*6>a  快速生成    -->
		<ul>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
		</ul>
	</div>
</body>
</html>

image-20200727153123715

块元素独占一行，我们需要加浮动，那是给li加还是给a标签加呢？这肯定加给li，因为a本来就是行内元素，本来就显示在一行上，而li才是块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.banner {
			width: 760px;
			height: 150px;
			/*居中对齐*/
			margin: auto;
		}
		.nav {
			width: 760px;
			height: 32px;
			/*居中对齐*/
			margin: 0 auto;
			background: url(images/nav_bg.jpg) repeat-x;
		}
		.nav ul li {
			/*因为li 让文字竖着显示，所以必须给li 添加浮动*/
			float: left;
		}
	</style>
</head>
<body>
	<!-- banner 是广告条的 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="">
	</div>
	<!-- nav 导航栏部分  -->
	<!-- 以后我们重要的导航栏，都要采取 li 包含a 的写法 -->
	<div class="nav">
<!--		ul>li*6>a  快速生成    -->
		<ul>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
		</ul>
	</div>
</body>
</html>

image-20200727153443764

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.82
Branch： branch02

commit description：a0.82（为什么需要浮动——导航栏案例example06-2-导航框子实现）

tag：a0.82

6.2.2.1.3 example06-3

鼠标一经过，导航栏小盒子变色，这个小盒子肯定是有一个高度和一个宽度的，尺寸是给a加呢？还是给li呢？

显然是给a的，因为鼠标经过有效果，只有a才默认有此效果（a:hover），li就别管了，a可以把li撑开的。

image-20200727153600937

		.nav ul li a {
			width: 80px;
			line-height: 32px;
			height: 32px;
			background-color: pink;
		}

a是行内元素，设置大小没有用，因此需要转成块元素。

image-20200727154047057

		.nav ul li a {
			/*a是行内元素需要转换*/
			display: block;
			width: 80px;
			line-height: 32px;
			height: 32px;
			background-color: pink;
		}

image-20200727154215331

背景是图片，我们刚开始设置为颜色，是为了调试css代码。

拾取文字颜色。

image-20200727154527458

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.banner {
			width: 760px;
			height: 150px;
			/*居中对齐*/
			margin: auto;
		}
		.nav {
			width: 760px;
			height: 32px;
			/*居中对齐*/
			margin: 0 auto;
			background: url(images/nav_bg.jpg) repeat-x;
		}
		.nav ul li {
			/*因为li 让文字竖着显示，所以必须给li 添加浮动*/
			float: left;
		}
		.nav ul li a {
			/*a是行内元素需要转换*/
			/*一定给a 大小，  因为我们需要 a:hover*/
			display: block;
			width: 80px;
			/* 文字垂直居中 */
			line-height: 32px;
			height: 32px;
			/*background-color: pink;*/
			background: url(images/button1.jpg) no-repeat;
			font-size: 12px;
			text-decoration: none;
			/*字体颜色*/
			color: #40510a;
			text-align: center;

		}
		/*鼠标经过的背景图片*/
		.nav ul li a:hover {
			background-image: url(images/button2.jpg);
		}
	</style>
</head>
<body>
	<!-- banner 是广告条的 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="">
	</div>
	<!-- nav 导航栏部分  -->
	<!-- 以后我们重要的导航栏，都要采取 li 包含a 的写法 -->
	<div class="nav">
<!--		ul>li*6>a  快速生成    -->
		<ul>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
			<li><a href="#">网站首页</a></li>
		</ul>
	</div>
</body>
</html>

小结：主要的导航里面一定是ul=>li包含着a，如果有鼠标经过的效果，设置尺寸的时候不要设置在li上，而是a上，要是想把多个文字放在一行上，就设置在li上。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.83
Branch： branch02

commit description：a0.83（为什么需要浮动——导航栏案例example06-3-最终实现）

tag：a0.83

7. 浮动(float)的扩展

7.1 1). 浮动元素与父盒子的关系

  • 子盒子的浮动参照父盒子对齐
  • 不会与父盒子的边框重叠，也不会超过父盒子的内边距

    ​

如：左对齐

image-20200727160643898

不会超过边框的

image-20200727160712454

同理如果父级有padding，也不会压住父级的内边距的。

7.1.1 example07

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动元素与父盒子的关系</title>
	<style>
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			border: 20px solid red;
		}
		.son {
			float: right;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

image-20200727160958254

加上内边距padding：

		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			border: 20px solid red;
			padding: 20px;
		}

image-20200727161045778

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.84
Branch： branch02

commit description：a0.84（浮动应用——example07-浮动元素与父盒子的关系）

tag：a0.84

7.2 2). 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

  • 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
  • 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

小结：

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

在这里插入图片描述

7.2.1 example08

7.2.1.1 example08-1
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.damao {
			width: 150px;
			height: 150px;
			background-color: purple;
		}
		.ermao {
			width: 200px;
			height: 200px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
</body>
</html>

标准流独占一行，自上而下。

image-20200727161701385

一个浮动，一个不浮动。

		.damao {
			float: left;
			width: 150px;
			height: 150px;
			background-color: purple;
		}

image-20200727161829242

两者均浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.damao {
			float: left;
			width: 150px;
			height: 150px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
</body>
</html>

两个盒子均与上沿对齐，并排列一行。

image-20200727161943828

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.85
Branch： branch02

commit description：a0.85（浮动应用——example08-1-浮动元素与兄弟盒子的关系1）

tag：a0.85

7.2.1.2 example08-2

如果第一个盒子不浮动，第二个浮动呢？可能还是和上面的情况一样，第二个盒子把第一个盒子盖住，我们看一下：

		.damao {
			width: 150px;
			height: 150px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: skyblue;
		}

然而发生了奇怪的现象，位置不变。

第一个盒子不浮动，独占一行，第二个盒子即使浮动，它也上不去的。

image-20200727162207015

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.86
Branch： branch02

commit description：a0.86（浮动应用——example08-2-浮动元素与兄弟盒子的关系2）

tag：a0.86

建议:如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

8. 清除浮动

为什么要用浮动呢？其实最为重要的则是能让块级元素在一行内显示，不留间隙。

8.1 为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

为啥不方便给高度呢？

如：这种类似新闻或者文章，每篇文字都不一样多，你不可能针对不同文章就因为一个高度，就多弄一个css，这样代码相当冗余，因此一般情形下，父级设不设置高度的。

image-20200727164301265

在这里插入图片描述

在这里插入图片描述

8.1.1 example09

8.1.1.1 example09-1

标准流不会影响盒子布局

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      /*one是父级，但是很多情况下，不方便给高度 子盒子有多少内容，就显示多少内容，自动撑开父亲最为合理*/
      .one {
         width: 500px;
         background-color: pink;
      }
      .damao {
         width: 200px;
         height: 200px;
         background-color: purple;
      }
      .ermao {
         width: 250px;
         height: 250px;
         background-color: skyblue;
      }
      .two {
         width: 700px;
         height: 150px;
         background-color: #000;
      }
   </style>
</head>
<body>
   <div class="one">
      <div class="damao"></div>
      <div class="ermao"></div>
   </div>
   <div class="two"></div>
</body>
</html>

image-20200727165303424

标准流根据不同的显示内容，会撑大父级盒子。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.87
Branch： branch02

commit description：a0.87（浮动应用——example09-1-标准流不会影响盒子布局）

tag：a0.87

8.1.1.2 example09-2

浮动会影响盒子布局

重点我们需要的是横向的，因此需要引入浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			background-color: pink;
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}
	</style>
</head>
<body>
	<div class="one">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
	<div class="two"></div>
</body>
</html>

发生了奇怪的现象：黑盒子跑到后面去了，布局非常乱。

因为浮动的元素不占位置，且父级盒子没高度，导致父级也不占位置，父级盒子消失了，因此黑盒子就跑到顶层去了。

因为damao ermao 浮动了，不占有位置， 而父级又没有高度， 所以two就到底下去了

image-20200727165840948

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.88
Branch： branch02

commit description：a0.88（浮动应用——example09-2-浮动会影响盒子布局）

tag：a0.88

因此就需要清除浮动了。

  • 总结：
    • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
    • 准确地说，并不是清除浮动，而是清除浮动后造成的影响

8.2 清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。

父级有了高度，就不会影响下面的标准流了

8.3 清除浮动的方法

在CSS中，clear属性用于清除浮动，在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会再回头分析。

  • 语法：
选择器{clear:属性值;}   clear 清除
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

但是我们实际工作中， 几乎只用 clear: both;

8.3.1 1).额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
  • 优点： 通俗易懂，书写方便
  • 缺点： 添加许多无意义的标签，结构化较差，页面冗余。
8.3.1.1 example10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}
		/*清除浮动*/
		.clear {
			clear: both;
		}
	</style>
</head>
<body>
	<div class="one">
		<div class="damao"></div>
		<div class="ermao"></div>
		<div class="clear"></div>
	</div>
	<div class="two"></div>
</body>
</html>

image-20200727172002228

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.89
Branch： branch02

commit description：a0.89（example10-清除浮动之额外标签法）

tag：a0.89

8.3.2 2).父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

8.3.2.1 example11
8.3.2.1.1 example11-1

简单了解overflow

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 100px;
			height: 100px;
			/*bd+ => border: 1px solid #000;速写法*/
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<div>
		天王盖地虎，导师一米五
		天王盖地虎，导师一米五
		天王盖地虎，导师一米五
		天王盖地虎，导师一米五
		天王盖地虎，导师一米五
		天王盖地虎，导师一米五
		天王盖地虎，导师一米五
	</div>
</body>
</html>

image-20200727172935642

		div {
			width: 100px;
			height: 100px;
			/*bd+ => border: 1px solid #000;速写法*/
			border: 1px solid #000;
			overflow: hidden;
		}

溢出部分就被隐藏了。

image-20200727173110564

		div {
			width: 100px;
			height: 100px;
			/*bd+ => border: 1px solid #000;速写法*/
			border: 1px solid #000;
			/*overflow: hidden;*/
			overflow: auto;
		}

overflow: auto添加垂直滚动条。

image-20200727173449707

		div {
			width: 100px;
			height: 100px;
			/*bd+ => border: 1px solid #000;速写法*/
			border: 1px solid #000;
			/*overflow: hidden;*/
			/*overflow: auto;*/
			overflow: scroll;
		}

overflow: scroll添加垂直和水平滚动条。

image-20200727173527910

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.90
Branch： branch02

commit description：a0.90（example11-1-简单了解overflow）

tag：a0.90

8.3.2.1.2 example11-2

清除浮动之父级添加overflow

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
			/*给父级添加 overflow 就可以清除浮动*/
			overflow: hidden;
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div class="one">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
	<div class="two"></div>
</body>
</html>

image-20200727172002228

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.91
Branch： branch02

commit description：a0.91（example11-2-清除浮动之父级添加overflow）

tag：a0.91

8.3.3 3).父级使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了 （比上面两种方法更好）

:after实际意思就是在该指定标签的内部子标签末尾后加一个空标签（但是它是在css中写的，并没有在html的结构中有所体现，即在结构中不体现的），相当于：

	<div class="one clearfix">
		<div class="damao"></div>
		<div class="ermao"></div>
		<div></div>
	</div>

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
  • 优点： 符合闭合浮动思想 结构语义化正确
  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发hasLayout。
  • 代表网站： 百度、淘宝网、网易等

在这里插入图片描述

8.3.3.1 example12

清除浮动之父级添加after伪元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*声明清除浮动的样式*/
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		.clearfix {
			*zoom: 1;  /*ie6,7 专门清除浮动的样式*/
		}
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
			
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div class="one clearfix">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
	<div class="two"></div>
</body>
</html>

image-20200727172002228

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.92
Branch： branch02

commit description：a0.92（example12-清除浮动之父级添加after伪元素）

tag：a0.92

8.3.4 4).父级使用双伪元素清除浮动

使用方法：

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

  • 优点： 代码更简洁

  • 缺点： 由于IE6-7不支持:after，使用zoom:1触发 hasLayout。

  • 代表网站： 小米、腾讯等

注意：由于伪元素还没有分析，这里关于伪元素解决浮动大家记住解决结果即可，关于细节原理，后面分析伪元素的时候再说！

8.3.4.1 example13

清除浮动之父级添加双伪元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*声明清除浮动的样式*/
		/*并集选择器*/
		.clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}
		/*很多情况下，我们的父盒子，不方便给高度  根据内容撑开，有多少内容，我的父盒子就有多高*/
		.one {
			width: 500px;
			/*background-color: pink;*/
			border: 1px  solid red;
			
		}
		/*因为damao 二毛 浮动了，不占有位置， 而父级又没有高度， 所以two 就到底下去了*/
		.damao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			float: left;
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}

	</style>
</head>
<body>
	<div class="one clearfix">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
	<div class="two"></div>
</body>
</html>

image-20200727172002228

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.93
Branch： branch02

commit description：a0.93（example13-清除浮动之父级添加双伪元素）

tag：a0.93

8.4 清除浮动总结

以后什么时候用清除浮动呢？

  1. 父级没高度
  2. 子盒子浮动了（标准流子盒子撑开父盒子，现在浮动了，父盒子没了）
  3. 影响下面布局（乱了）了，我们就应该清除浮动了。
清除浮动的方式优点缺点
额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差。
父级overflow:hidden;书写简单溢出隐藏
父级after伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题
父级双伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题

后面两种伪元素清除浮动，大家暂且会使用就好， 深入原理，我们后面谈到伪元素再分析。

9. Photoshop 切图

常见的图片格式

1. jpg图像格式： 
JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的

2. gif图像格式：
GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果

3. png图像格式
是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景

4. PSD图像格式
PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。

PS切图 可以 分为 利用切片工具切图 以及 利用PS的插件快速切图。

通过图层，来查看每个部分，并去切图。

image-20200727191954055

9.1 1). PS切片工具

1498466173246

ps切图片，分两大步：

1). 用切片选中图片

  • 利用切片工具手动划出（可用上下左右键来移动框选范围，如果不想要了可用del键删除，可用四周的小圆点放大或缩小切片）

  • 图层菜单—新建基于图层的切片

  • 利用辅助线 来切图 – 基于参考线的切片

    1498466734205

image-20200727192941845

2). 导出切片

文件菜单 – 存储为web设备所用格式 ---- 选择 我们要的图片格式 ---- 点存储 — 别忘了选中的切片

image-20200727193112858

image-20200727193129025

image-20200727193226953

image-20200727193601169

image-20200727193653790

另一种切图方法，它可以把以前的切片选中。

image-20200727194115819

如果切了logo，用刚刚的方法不太好切，因为都是不规则的图形，我们用另外一种方法。

image-20200727194412618

我们点击一下logo

image-20200727194715304

image-20200727194826933

点击之后，就自动框选logo。

image-20200727195144770

再按之前的方法导出即可。

紧接着切片选择工具，删除掉选中的图片。

如果需要的是透明的logo：

可把白色背景去掉即可

image-20200727195913557

紧接着重复刚才的步骤切图即可。

image-20200727200239614

image-20200727200810542

image-20200727200819953

我们还可以利用辅助线进行切图：

画好辅助线

image-20200727201349612

点击切片工具，在点击基于参考线的切片。

image-20200727201445814

然后点击切片选择工具，选中想要的切片即可。剩下就是导出了，跟上面步骤一样了。

如果刚切的图太多了，想从图层上都删除，可以：

9.1.1 辅助线和切片使用及清除

视图菜单-- 清除 辅助线/ 清除切片

image-20200727201040695

如果参考线很多，不想要

image-20200727201707895

9.2 2). 切图插件

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

官网: http://www.cutterman.cn/zh/cutterman

注意： cutterman插件要求你的ps 必须是完整版，不能是绿色版，所以大家需要从新安装完整版本。

在窗口有扩展功能，才能安装插件。

image-20200727201929509

安装插件：

image-20200727202153981

image-20200727202340552

重启PS。

看看插件是否安装成功：

image-20200727202549635

点击后，让我们登录，第一次使用我们需要去注册。

image-20200727202814521

image-20200727202849120

登录成功后。

image-20200727203044979

还是像往常一样，利用移动工具或者切片工具选中要切的部分，然后选择插件，就可以一键导出了。

image-20200727204142187

image-20200727204229534

image-20200727204236049

最为强大之处是：

我们想把背景切出来，如果是ps会很麻烦（得找到图层里的文字，隐藏之后再切），我们可以利用插件会非常方便。

image-20200727204406159

选中对应按钮的图层，直接用插件导出即可。

image-20200727205047044

image-20200727205058376

如导出一张图，只导出一部分。

可以用框选工具，再导出。

image-20200727210016645

image-20200727210058019

在这里插入图片描述

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.94
Branch： branch02

commit description：a0.94（切图素材）

tag：a0.94



（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解css清除浮动float的七种常用方法总结和兼容性处理
09-24
本文将详细介绍七种常见的CSS清除浮动的方法，并讨论它们的兼容性处理。 1. **添加空div法** 这是最原始的清除浮动方式，通过在浮动元素后面添加一个空的div，并设置`clear:both;height:0;overflow:hidden;`。这种...
CSS清除浮动的方法详解
09-24
总结来说，不同的清除浮动方法适用于不同的场景，选择哪种方法取决于项目需求、兼容性和代码维护性。通常，`:after`伪元素结合`clearfix`类是一种既高效又优雅的解决方案，但理解并掌握所有方法有助于应对各种复杂的...
浅谈css中浮动和清除浮动带来的影响
09-27
CSS中的浮动（float）是一种布局技术，最早设计用于创建文本环绕图像的效果，但后来被广泛应用于创建复杂的网页布局。在CSS中，浮动元素会脱离标准文档流，允许其他非浮动元素移动到其旁边，以此实现多列布局或者...
CSS浮动所差生的内容溢出问题及清除浮动的方法小结
09-24
总的来说，清除浮动是CSS布局中必不可少的一个环节，它能确保元素布局的稳定性和页面的正确展示。开发者应根据项目需求和浏览器兼容性选择合适的清除浮动策略。在现代前端开发中，使用`:before`和`:after`伪元素的...
CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器
09-25
在CSS布局中，浮动元素（float）经常用于创建...只需将`.clearfix`类添加到父元素，并应用相应的CSS样式，即可在Firefox和其他符合W3C标准的浏览器中实现浮动清除。同时，为了兼容旧版IE，可以结合使用`*zoom:1`属性。
Normalize.css简介及详解、使用
热门推荐
xiao廸要飞
08-30 4万+
文章目录什么是Normalize综述Normalize vs Reset如何使用 normalize.css结语相关阅读代码 什么是Normalize Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS
4.（css3布局）使用flex布局携程网首页案例
xiao廸要飞
01-12 1822
文章目录1. 携程网首页案例制作1.1 技术选型1.2 搭建相关文件夹1.3 设置视口标签以及引入初始化样式1.4 初始化样式1.5 模块名字划分1.6 常见flex布局思路1.7 背景线性渐变2. 代码实现2.1 search-index2.2 focus2.3 local-nav2.4 nav2.5 subnav-entry2.6 sales 1. 携程网首页案例制作 1.1 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取flex布局为主 1.2 搭建相关文件夹 参考：https
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
xiao廸要飞
07-26 813
文章目录1. 盒子模型（CSS重点）1.1 看透网页布局的本质1.2 盒子模型（Box Model）1.3 盒子边框（border）1.3.1 边框综合设置1.3.2 example011.3.3 盒子边框写法总结表1.3.3.1 example021.3.4 表格的细线边框1.3.4.1 example031.4 内边距（padding）1.4.1 内边距：1.4.2 设置1.4.2.1 example041.4.2.2 example051.4.3 课堂案例： 新浪导航1.4.4 内盒尺寸计算（元素
2. （css3布局）使用流式布局移动端JD首页案例
xiao廸要飞
01-12 779
文章目录1. 案例：京东移动端首页2. 技术选型3. 搭建相关文件夹结构4. 设置视口标签以及引入初始化样式5. 常用初始化样式6. 导航布局6.1 首行7. 二倍精灵图做法8. 图片格式8.1 DPG图片压缩技术8.2 webp 图片格式9. 下半部布局10. 移动端布局之流式布局总结 1. 案例：京东移动端首页 访问地址： m.jd.com 2. 技术选型 方案：采取单独制作移动页面方案 技术：布局采取流式布局 3. 搭建相关文件夹结构 images 背景图 upload 产品图 4.
0基础快速入门CSS技术栈（3）—图解详细阐述CSS文字文本样式及综合案例、样式调试工具、快速开发html的emment语法（附详细案例源码解析过程）
xiao廸要飞
07-16 652
文章目录1. CSS字体样式属性调试工具2. font字体2.1 font-size:大小2.2 font-family:字体2.2.1 CSS Unicode字体2.3 font-weight:字体粗细2.4 font-style:字体风格2.4.1 example012.5 font:综合设置字体样式 (重点)2.5.1 example022.6 font总结3. CSS外观属性3.1 color:文本颜色3.2 text-align:文本水平对齐方式3.3 line-height:行间距3
7.（css）使用浮动布局学成网案例
xiao廸要飞
01-08 535
文章目录1. 页面制作重点提炼2. 前期准备素材3. 前期准备工作4. CSS属性书写顺序(重点)5. 布局流程6. 页面制作6.1 1) 头部制作6.2 2）banner制作6.3 3）课程表模块6.4 4）精品推荐小模块6.5 5）精品推荐大模块6.6 6） 底部模块制作7. chrome调试工具7.1 怎样打开Chrome的开发者工具？7.1.1 chrome调试数值7.1.2 快速定位css所在行数7.2 Chrome提示的常见布局错误7.2.1 1). css单词书写错误提示7.2.2 2)
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
xiao廸要飞
07-17 467
文章目录1. 0基础快速入门CSS技术栈(4)2. 重点提炼3. CSS复合选择器3.1 后代选择器（重点）3.1.1 example013.2 子元素选择器3.2.1 exmaple023.3 交集选择器3.3.1 example033.4 并集选择器（重点）3.4.1 example043.5 测试题3.6 链接伪类选择器（重点）3.6.1 example053.6.2 example063.7 复合选择器总结4. 标签显示模式（display）重点4.1 什么是标签显示模式4.2 块级元素(bl
0基础快速入门CSS技术栈（1）—图解详细阐述初识CSS（附详细案例源码解析过程）
xiao廸要飞
07-15 449
文章目录1. CSS层叠样式表1.1 学习目标2. HTML的局限性3. CSS 网页的美容师4. CSS初识5. 引入CSS样式表（书写位置）5.1 行内式（内联样式）5.2 内部样式表（内嵌样式表）5.2.1 综合案例5.3 外部样式表（外链式）5.3.1 example015.4 三种样式表总结（位置）5.4.1 团队约定-代码风格5.4.2 团队约定-代码大小写6. 5. 总结CSS样式规则7. @拓展阅读7.1 第一个提案7.2 Viola 以及原始浏览器之战7.3 Web 之前的样式表7.
8.（css）定位使用全攻略
xiao廸要飞
01-09 365
文章目录1. 定位(position)重点提炼2. CSS 布局的三种机制3. 为什么使用定位4. 定位详解4.1 边偏移4.2 定位模式 (position)4.2.1 静态定位(static) - 了解4.2.2 相对定位(relative) - 重要4.2.2.1 example014.2.2.1.1 example01-14.2.2.1.2 example01-24.2.2.2 相对定位的特点：（务必记住）4.2.3 绝对定位(absolute) - 重要4.2.3.1 example024.2.
9. （css）高级常用技巧全攻略
xiao廸要飞
01-09 354
文章目录1. CSS高级技巧重点提炼2. 元素的显示与隐藏2.1 display 显示（重点）2.1.1 example012.1.2 实际开发场景2.2 visibility 可见性 (了解)2.2.1 example022.3 overflow 溢出(重点)2.3.1 example032.3.1.1 example03-12.3.1.2 example03-22.3.1.3 example03-32.3.1.4 example03-42.3.2 实际开发场景2.4 显示与隐藏总结2.4.1 案例3.
3. （css3）3D转换快速上手
xiao廸要飞
01-11 289
文章目录1. 重点提炼2. `3D` 转换3. `3D` 移动 `translate3d`4. 透视 `perspective`5. `translateZ`6. `3D` 旋转`rotateX`7. `3D` 旋转 `rotateY`8. `3D` 旋转 `rotateZ`9. `rotate3d`10. `3D` 呈现 `transform-style`11. example01-案例：两面翻转的盒子12. example02-案例：3d导航栏13. example03-案例：旋转木马14.
0基础快速入门CSS技术栈（2）—图解详细阐述CSS基础选择器（附详细案例源码解析过程）
xiao廸要飞
07-15 279
文章目录1. CSS选择器（重点）1.1 CSS选择器作用（重点）1.1.1 选择器的作用1.2 CSS基础选择器1.2.1 标签选择器1.2.1.1 example011.2.2 类选择器1.2.2.1 example021.2.2.2 example031.2.3 类选择器特殊用法- 多类名1.2.3.1 example041.2.4 id选择器1.2.4.1 example051.2.4.2 id选择器和类选择器区别1.2.5 通配符选择器1.2.5.1 example061.2.6 基
3. （css3布局）移动web开发——flex布局
xiao廸要飞
01-12 233
文章目录1. 重点提炼2. 传统布局和flex布局对比2.1 传统布局2.2 flex布局（弹性布局）2.3 建议3. flex布局初体验3.1 搭建HTML结构3.2 example014. flex布局原理4.1 demo4.2 flex布局原理总结5. 父项常见属性5.1 flex-direction设置主轴的方向 :star:5.2 主轴与侧轴5.3 属性值5.3.1 example025.3.1.1 example02-15.3.1.2 example02-25.4 justify-conte
css基础4-浮动布局
12-05
本资源主要讲解CSS基础中的浮动布局技术，包括以下几个关键知识点： 1. 结构伪类选择器：结构伪类选择器是CSS中一种根据HTML元素在文档结构中的位置来选择元素的方法，如`:nth-child`，允许开发者通过索引（n值）来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值