【博学谷学习记录】超强总结，用心分享|前端开发持续六周的感受

今天和大家分享css布局中的浮动

一、结构伪类选择器

1.作用与优势：

1. 作用：根据元素在 HTML 中的结构关系查找元素

2. 优势：减少对于 HTML 中类的依赖，有利于保持代码整洁

3. 场景：常用于查找某父级选择器中的子元素

2.选择器

 

 n的注意点：

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

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

 

nth-of-type结构伪类选择器

 

区别： 

• :nth-child → 直接在所有孩子中数个数

• :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数

 

 

二、伪元素

伪元素： 一般页面中的非主体内容可以使用伪元素

区别：

1. 元素： HTML 设置的标签

2. 伪元素：由 CSS 模拟出的标签效果

        种类： 

注意点：

1. 必须设置 content 属性才能生效

2. 伪元素默认是行内元素

三、标准流

标准流：又称 文档流 ，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1. 块级元素：从上往下， 垂直布局 ，独占一行

2. 行内元素 或 行内块元素：从左往右， 水平布局 ，空间不够自动折行

四、浮动

1.浮动的作用

2.浮动的代码

3.浮动的特点

 

1.1 浮动的作用

早期的作用： 图文环绕

现在的作用： 网页布局

 2.1 浮动的代码

        属性名：float

3.1 浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

   相当于从地面飘到了空中

2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

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

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

一行可以显示多个

可以设置宽高

注意点：

• 浮动的元素不能通过 text-align:center 或者 margin:0 auto

五、清除浮动 

1.清除浮动的介绍

2. 清除浮动的方法

1.1 清除浮动的介绍

含义： 清除浮动带来的影响

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

原因：

• 子元素浮动后脱标 → 不占位置

目的：

• 需要父元素有高度，从而不影响其他网页元素的布局

2.1 清除浮动的方法 — ① 直接设置父元素高度 

特点：

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

2.2 清除浮动的方法 — ② 额外标签法

操作：

1. 在父元素 内容 的最后添加一个块级元素

2. 给添加的块级元素设置 clear:both

特点：

缺点：会在页面中添加额外的标签，会让页面的 HTML 结构变得复杂

2.3 清除浮动的方法 — ③ 单伪元素清除法

操作：用伪元素替代了额外标签 

特点：

优点：项目中使用，直接给标签加类即可清除浮动

 

2.4 清除浮动的方法 — ④ 双伪元素清除法

特点：

优点：项目中使用，直接给标签加类即可清除浮动

2.5 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

操作：

1. 直接给父元素设置 overflow : hidden

特点：

                  优点：方便