前端第六天学习浮动

1.结构伪类选择器

​ 选择父元素中的子元素，匹配父元素中第n个子元素

​ E就是Element，元素的意思

​ 父元素 E:first-child {} 选择的是第一个子元素

​ 父元素 E:last-child {} 选择的是最后一个子元素

​ 任意元素： ：nth-child（n | 关键字 | 公式） nth-child（）是从第一个开始选，依次往后选，也包含其他的照片

​ n 表示从0到n的数字 nth先执行所有的nth-child，在找第一个子元素，不一定是你想选择的标签的 第一个子元素，可能是别的标签的第一个子元素，然后就不生效了

​ 关键字 even是偶数 odd是奇数

​ 公式 2n是偶数 2n+1 | 2n-1是奇数 -n+5：前五个元素 n+5：从第五个开始往后的元素

​ 倒数第几个元素 ：nth-last-child（）

​ nth-of-type结构伪类选择器：父元素的同类型的子元素中，匹配第n个

​ 通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

​ 选择的是不同标签的第一个子元素，然后在找选择元素的第一个子元素

​ 意思就是直接找到这种元素，然后在找第几个

2.伪元素

​ 伪元素的权重值是1

​ 伪元素在html标签中不显示 它设在CSS样式中，然后生效

​ ：：before 是在元素之前设置

​ ：：after 是在元素之后设置

​ 注意： 设置伪元素必须要加content：“”；

​ 伪元素是行内元素，必须要转换成块元素（display：block；）

3.浮动

​ 兄弟元素有浮同享

​ 作用：文字效果 页面布局

​ 代码：float：left；左浮动

​ float：right；右浮动

​ float：none；不浮动

​ 特点：1. 脱标不占位置

​ 2. 可以覆盖标准流中的元素，不能压住文字和图片

​ 3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

​ 4. 浮动元素会受到上面元素边界的影响（浮动元素只会影响他后面的元素）

​ 5.浮动元素有特殊的显示效果

​ • 一行可以显示多个

​ • 可以设置宽高

​ 注意: 当我们给盒子设置了浮动，margin： 0 auto 和 text-align就不生效了 一定要注意

4.清除浮动

​ 目的：消除浮动元素带来的影响 父元素没有高度

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

​ （2）额外标签法 就是找到最后一个浮动的元素，然后给它后面加上一个块元素，给这个元素增加属性 clear:both

（3）单伪元素法 就是给父元素添加一个clearfix类，这个类里加一个在它之后的伪元素

.clearfix::after {

					content:"";

					clear:both;

					display:block；

					height:0；

					line-height:0；

					visibility: hidden;      隐藏元素

				}

（4）双伪元素法 给浮动的父元素增加clearfix类

.clearfix::before，.clearfix::after {             //这是两个并集选择器

					content：""；

					display：table；

				}

				.clearfix::after  {

					clear：both；

				}

（5）给父元素设置 overflow：hidden； 在CSS样式中直接加 overflow：hidden；