（08）2020-12-10（清除浮动/解决父类塌陷问题、定位问题、ifont图标）

清除浮动/解决父类塌陷问题、ifont图标

一、清除浮动
- 1，父类塌陷产生原因
- 2，解决方法（不推荐，只做了解）
- 3，解决方法
- - 1, css的伪元素，是指他们不是真正的页面元素。html中并没有对应的结构，但是其用法与表现，行为与真正的页面元素一样。
  - 2,清除浮动/解决父类塌陷
- 4，ifont图标
二、定位问题
- 1，css中定位属性最常用的三种：绝对定位，相对定位和固定定位。
- 2，相对定位
- 3，绝对定位
- 4，压盖效果
- 5，z-index属性
- 6，固定定位
- 7，粘性定位
- 8，例子（小圆点绝对定位）

一、清除浮动

1，父类塌陷产生原因

前提：父元素没有设置高度，高度由子元素高度撑开。
当父元素内的子元素都浮动起来之后，脱离标准文档流，导致父元素高度变为0。即出现父类塌陷问题。

2，解决方法（不推荐，只做了解）

方法1：给父元素设置高度

不推荐理由：不能把高度固定死，不适合做自适应的效果。
（解释：如果给父元素设置高度，高度固定之后，文档内容少的话，会留下大片空白区域。文档内容足够多的话，会溢出。高度无法自适应）

方法2：父元素添加浮动

不推荐理由：会影响后面的元素布局。
（解释：给父元素也添加上浮动之后，父元素脱离了文档流，又有了宽、高（宽和高都由父元素中内容撑开）。但是父元素下的box元素会直接填充到原来父元素的位置。影响页面布局）

方法3：给父元素添加添加overflow：hidden
添加overflow：hidden之后，父盒子会拥有BFC属性。
不推荐：

优点：简单
缺点：内容比较多的时候，容易造成内容被隐藏。
（（（解释：若父盒子没有高度，给父盒子添加添加overflow：hidden之后，父盒子的宽自适应全屏，高度由子盒子宽度撑开。
（1）当父元素内只有浮动起来的元素：由于父元素的高是由子盒子撑开，与子盒子一样高。若浮动元素中的内容足够多，超出其设置的宽高范围，也就超出了父元素范围，超出部分被隐藏。
（2）当父元素内除了浮动起来的元素外，文档流中也有元素。
若该元素是行内元素则会依次向右排，排满一行向下换行。
若该元素是块状元素，会自动排到文档流中的左上角，1）当其宽高不够大，被隐藏时，其中的内容也不会显示。2）若其宽高足够大，会把父元素的高度撑大，之前浮动元素溢出内容会显示出来（全部或部分），当块状元素中内容足够多，溢出超出父框部分又会被隐藏掉。）））

方法4：设置父盒子为行内块
不推荐理由：会影响后面的元素布局。
（解释：给父元素设置 display: inline-block;之后，父元素有了子元素撑起来的宽和高。但父元素也变成了行内块元素，有一定高度和宽度，会与其他行内元素并排展示。当与其并排展示的行内元素比较少或没有与之并排展示的行内元素时，会出现大片留白区域。影响页面的排版布局。）

方法5：在父元素下添加一个清理元素，设置专门清除浮动的属性：clear（不推荐）
clear:both 不允许左侧和右侧有浮动效果。
clear本质：清理元素（拥有clear属性的元素）的顶部添加足够多的外边距，使清理元素的顶部边缘下降到浮动元素的下面。
不足：
1.浮动元素的父类仍然没有高度，父类塌陷没有解决。
2.清理元素的margin-top会失效，其他三个方向仍然有效。

eg:清理元素box:

    <div class="father"><div class="son1"></div><div class="son2"></div>        </div><div class="box">box</div>

    <style>.father{background-color: violet;}.son1,.son2{width: 300px;height: 150px;float: left;}.son1{background-color: teal;}.son2{background-color: tomato;}.box{width: 200px;height: 200px;background-color: saddlebrown;clear: both;margin-top: 50px;}</style>

方法6：在父元素内设置空标签添加clear：both （不推荐）
优点：简单方便
缺点：会添加一个无意义的空标签，有违结构与表现的分离。在以后的维护过程中会十分麻烦。

 <div class="father"><div class="son1"></div><div class="son2"></div><span class="clearfix"></span></div><div class="container">我是内容</div>

   <style>.father{background-color: violet;}.son1,.son2{width: 300px;height: 150px;float: left;}.son1{background-color: teal;}.son2{background-color: tomato;}.clearfix{clear: both;}</style>

3，解决方法

方法7，使用伪元素清除浮动(推荐使用)

1, css的伪元素，是指他们不是真正的页面元素。html中并没有对应的结构，但是其用法与表现，行为与真正的页面元素一样。

：before
格式：
选择器::before{声明；}
：after
格式：
选择器::after{声明；}

设置伪元素，content是必须添加的。

添加的内容是默认为行内元素的。

2,清除浮动/解决父类塌陷

直接使用选择器或者是给需要清除浮动塌陷的父元素添加clearfix属性，css样式中设置其属性为：
clearfix::after{
content: “”;
clear: both;
display: block;
}
content:""; 伪元素必写，否则不生效，可以设置为空
clear:both 只会对块元素生效。

或者

clearfix::before{
content: “”;
clear: both;
display: block;
}

<div class="father"><div class="son1"></div><div class="son2"></div>
</div>
<div class="container">我是内容</div>

    <style>.father{background-color: violet;}.son1,.son2{width: 300px;height: 150px;float: left;}.son1{background-color: teal;}.son2{background-color: tomato;}.father::after{/* 伪元素必写，否则不生效，可以设置为空 */content: "";clear: both;/* clear:both 只会对块元素生效。 */display: block;}</style>

4，ifont图标

方法一
1.使用link标签引入css
eg:

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2200456_jdy81d52pfi.css">

2.使用span标签，class属性中添加‘iconfont icon-XXX’xxx为每个图标的专属类名。

方法二
1.将图片下载到本地，使用link标签引入css
eg:

<link rel="stylesheet" href="本地查找">

2.使用span标签，class属性中添加‘iconfont icon-XXX’
xxx为每个图标的专属类名。

二、定位问题

1，css中定位属性最常用的三种：绝对定位，相对定位和固定定位。

position 属性用于指定一个元素在文档中的定位方式。
position:
relative 相对定位
absolute 绝对定位
fixed 固定定位
偏移量，决定了元素的最终位置。
top
right
bottom
left

2，相对定位

相对定位
position: relative
让元素相对于自己原来的位置，进行位置调整。
margin和相对定位的区别：

1.概念
margin：用来表示盒子之间的间距。
相对定位：相对于自己原来的位置，进行位置调整。

2.影响
用相对定位只会影响当前元素本身的位置，不会对相邻元素的位置产生影响。
用margin除了会影响当前元素本身的位置，还会对相邻元素的位置产生影响。

相对定位不会脱标。原来的位置不会被其他元素占有。
相对定位的用途：
1.微调位置。
2.做绝对定位的参考系。（子绝父相）

3，绝对定位

绝对定位
position：absolute
会定义一个坐标系，按照坐标系进行位移。
设置绝对定位时，一定要设置偏移量。

如果使用top描述，是从参考系的顶部计算位置。
使用right描述，是从参考系的右边计算位置
使用bottom描述，是从参考系的底部计算位置。
使用left描述，是从参考系的左边计算位置。

绝对定位会脱标。

绝对定位的盒子会寻找最近的定位祖先元素，并以它为参考系。
1.最近的祖先元素，不一定非是父元素。
2.不一定是相对定位，也可以绝对定位等。只要包含定位信息。
一般情况下都是设置子绝父相。
父盒子设置相对定位（零偏移），子盒子设置绝对定位。

4，压盖效果

5，z-index属性

特性：

1.数值大的位于上面，压盖数值小的。
2.z-index 没有单位，是一个正整数。
3.如果大家都没有设置z-index，或者z-index一样，此时，压盖效果由html的书写顺序决定。
4.定位的元素永远可以压盖没有定位的元素。
5.只有设置了定位的元素，才可以设置z-index值。不管是相对，还是绝对还是固定。
6.从父现象：拼爹。假如父元素的z-index比较大，就不需要看子元素的z-index值。

6，固定定位

相对于浏览器窗口进行定位。无论页面如何滚动，盒子的位置不变。
position:fixed；

用途：
1.网页小广告
2.返回顶部
3.顶部导航
书写顶部导航条时，底部内容会被固定导航条遮盖。可以在body标签中，添加padding-top 高度为顶部导航条的高度即可。

7，粘性定位

    <title>Document</title><style>div{background-color: teal;position: sticky;top: 100px;}</style>
</head>
<body><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><p>三十功名尘与土</p><div>我是特殊的</div><p>八千里路云和月</p><p>八千里路云和月</p><p>八千里路云和月</p><p>八千里路云和月</p><p>八千里路云和月</p><p>八千里路云和月</p>
、、、、、、、、、、、、、、
</body>

8，例子（小圆点绝对定位）

    <title>Document</title><style>span{display: inline-block;width: 50px;height: 50px;/* 圆角 */border-radius: 50%;background-color: teal;}</style>
</head>
<body><span></span><span></span><span></span><span></span><span></span>
</body>