【CSS浮动】

一、结构伪类选择器

1.1作用与优势

1、作用：根据元素在HTML中的结构关系查找元素
2、优势：减少对于HTML中类的依赖，有利于保持代码整洁
3、场景：常用来查找某父级选择器中的子元素

1.2 选择器

选择器	说明
E:first-child{}	匹配父元素中第一个子元素，并且是E元素
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child{}	匹配父元素中倒数第n个子元素，并且是E元素

代码：

-n可以为常见公式：

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前五个	-n+5
找到从第五个往后	n+5

二、伪元素

伪元素：一般页面中的非主体内容可以使用伪元素
区别：
1、元素：HTML设置的标签
2、伪元素：由CSS模拟出的标签效果
种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：
1、必须设置content属性才能生效（content属性值为要添加的内容）
2、伪元素默认是行内元素

三、浮动

3.1 浮动的作用

场景：浏览器在解析行内块和行内标签的时候，如果代码换行，会产生一个空格的间距
浮动用于图文环绕或网页布局

3.2 浮动的代码

1、向左浮动：float:left
2、向右浮动：float:right

3.3 浮动的特点

1、浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4、浮动有特殊的显示效果:

• 一行可以显示多个
• 可以设置宽高

• 注意点:
  -浮动的元素不能通过text-align:center;或margin:0 auto;

  3.4 扩展：CSS书写顺序

  1、浮动/display
  2、盒子模型：margin、padding、border、宽度高度背景色
  3、文字样式
  优势：浏览器执行效率更高

  四、清除浮动

  4.1 介绍

  含义：清除浮动带来的影响
  -影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
  原因：子元素浮动后脱标——不占位置
  目的：需要父元素有高度，从而不影响其他网页元素的布局

  4.2 清除浮动方法

  4.2.1 直接设置父元素高度

  优点：简单粗暴
  缺点：有些布局中不能固定父元素高度

  4.2.2 额外标签法

  操作：
  1、在父元素内容的最后添加一个块级元素
  2、给添加的块级元素设置clear:both;
  缺点：会在页面中添加额外的标签，会让页面的HTML结构变的复杂
  -类名一般起作.clearfix

  4.2.3 单伪元素清除法

  操作：用伪元素代替了额外标签
  1、基本写法：
  
  2、补充写法（为了兼容性）：
  
  优点：项目中使用，直接给标签加类即可清除浮动

  4.2.4 双伪元素清除法

  操作：
  
  .clearfix::before 作用：解决外边距塌陷问题
  优点：项目中使用，直接给标签加类即可清除浮动

  4.2.5 给父元素设置overflow:hidden

  操作：直接给父元素设置overflow:hidden
  优点：方便