九、CSS 浮动

CSS 浮动

浮动
结构伪类选择器

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

选择器	说明
E:first-child	父元素中的第一个子元素 E
E:last-child	父元素中的最后一个子元素 E
E:nth-child(n)	父元素中的第 n 个子元素 E
E:nth-last-child(n)	父元素中的倒数第 n 个子元素 E

n 可以写公式

n 可取值：0 1 2 3 4…

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

ex:

    
第1个li
    
第2个li
    
第3个li
    
第4个li
    
第5个li
    
第6个li
    
第7个li
    
第8个li

伪元素

• 元素：HTML 标签
• 伪元素：CSS 模拟出标签效果，装饰性内容

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

注意：

• 必须设置 content 属性才能生效
• 伪元素默认是行内元素

.box::before {
  content: ''; // 必须加属性
}

标准流

标准流：又称为文档流，浏览器排列元素的规则

常见标准流的排版规则

• 块级元素：从上往下，垂直布局，独占一行
• 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

浮动

• 早期：图文环绕
• 现在：网页布局

float: left/right;

行内元素或行内块元素换行书写会产生一个空格

浮动的特点

• 浮动的标签默认顶对齐，可使用 margin-top 修改距离顶部距离
• 浮动元素会脱离标准流（脱标），在标准流中不占用位置
• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面，左右浮动
• 浮动标签具备行内块特点：
  1.一行显示多个
  2.可设置宽高
• 浮动之后盒子水平居中不生效 margin: 0 auto;

ex：

CSS 书写顺序

• 浮动 / display
• 盒子模型 margin border padding 宽度高度背景色
• 文字样式

常用 css

• 内减模式：box-sizing: border-box;
• 版心居中： margin: 0 auto;

清除浮动

清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

清除浮动的方法

1. 直接设置父元素高度
2. 额外标签
   在父元素内容的最后添加一个块级元素
   给添加的块级元素设置 clear:both;

.clearfix {
  clear: both;
}

3. 单伪元素清除法
   用伪元素替代了额外标签
   优点：直接给标签加类即可清除浮动
   （1）基本写法

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

（2）补充写法

.clearfix::after {
  content: '';
  display: block;
  clear: both;

  /* 兼容低版本IE */
  height: 0;
  visibility: hidden;
}

4. 双伪元素清除法

/* 解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

1. 给父元素设置 overflow:hidden

overflow: hidden;