CSS浮动

1、结构伪类选择器

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

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

   

  • n的注意点：

  1. n为：1、2、3、4、5、6、......

  2. 通过n可以组成常见的公式

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

2、伪元素

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

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

• 注意点：

  • 必须设置content属性才能生效

  • 伪元素默认是行内元素

3、标准流

• 标准流：又称文档流，是在浏览器在渲染显示网页内容时默认采用的一套排版规则，规定应该以何种方式排列元素
• 常见标准流排版规则：
  • 块级元素：从上到下，垂直布局，独占一行
  • 行内元素 或 行内块元素：从左到右，水平布局，空间不够自行折行

4、浮动

4.1、浮动的作用

• 图文环绕

• 网页布局，块在一行排列

4.2、浮动的特点

• 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
• 浮动有特殊的显示效果
  • 一行可以显示多个
  • 可以设置宽高
• 注意点：浮动的元素不能通过text-align:center或者margin:0 auto居中

5、清除浮动

• 含义：清除浮动给其他标签带来的影响
  • 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
• 原因：
  • 子元素浮动后脱标 --> 不占位置
• 目的：
  • 需要父元素有高度，从而不影响其他网页元素的布局
• 清除浮动方法：
  • 直接设置元素高度
    • 优点：简单粗暴，方便
    • 缺点：有些布局中不能固定父元素高度。如：新闻列表，京东推荐模块
  • 额外标签法
    • 特点：缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
    • 操作：
      • 在父元素内容的最后添加一个块元素
      • 给添加的块元素设置 clear:both
  • 单伪元素清除法
    • 操作：用伪元素替代了额外标签
    • 
    • 特点：项目中使用，直接给标签加类即可清除浮动
  • 双伪元素清除法
    • 操作：

      /* .clearfix::before 作用：解决外边距塌陷问题 */
      .clearfix::before,
      .clearfix::after {
          content: '';
          display: table;
      }
      /* 真正清除浮动标签 */
      .clearfix::after {
          clear: both;
      }

    • 特点：优点：项目中使用，直接给标签加类即可清除浮动
  • 给父元素设置 overflow : hidden
    • 操作：直接给父元素设置 overflow : hidden
    • 特点：优点：方便

拓展：

CSS书写顺序：浏览器执行效率高

1. 浮动 / display
2. 盒子模型：margin  border  padding  宽度高度背景色
3. 文字样式