CSS布局浮动目录Contents结构伪类选择器伪元素标准流浮动清除浮动学习目标LearningObjectives能够使用结构伪类选择器在HTML中选择元素能够说出标准流元素的布局特点能够说出浮动元素的特点能够使用浮动完成小米模块布局案例能够说出清除浮动的目的，并能够使用清除浮动的方法目录Contents结构伪类选择器伪元素标准流浮动清除浮动1.作用与优势：1.作用：根据元素在HTML中的结构关系查找元素2.优势：减少对于HTML中类的依赖，有利于保持代码整洁3.场景：常用于查找某父级选择器中的子元素2.选择器一、结构伪类选择器目标：能够使用结构伪类选择器在HTML中定位元素n的注意点：1.n为：0、1、2、3、4、5、6、……2.通过n可以组成常见公式一、结构伪类选择器注意点问题：在下列案例中，如果需要找到第一个a标签，如何去查找？一、结构伪类选择器（拓展）结构伪类选择器的易错点选择器：区别：•:nth-child→直接在所有孩子中数个数•:nth-of-type→先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数一、结构伪类选择器（了解）nth-of-type结构伪类选择器目录Contents结构伪类选择器伪元素标准流浮动清除浮动伪元素：一般页面中的非主体内容可以使用伪元素区别：1.元素：HTML设置的标签2.伪元素：由CSS模拟出的标签效果种类：注意点：1.必须设置content属性才能生效2.伪元素默认是行内元素二、伪元素目标：能够使用伪元素在网页中创建内容伪元素的必加属性是？•content属性伪元素创建出来后默认的显示模式是？•行内元素二、伪元素小结目录Contents结构伪类选择器伪元素标准流浮动清除浮动标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素常见标准流排版规则：1.块级元素：从上往下，垂直布局，独占一行2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行三、标准流目标：能够认识标准流的默认排布方式及其特点标准流中块级元素的排版规则是？•从上往下、垂直布局、独占一行标准流中行内元素或行内块元素的排版规则是？•从左往右、水平布局、空间不够自动折行三、标准流小结目录Contents结构伪类选择器伪元素标准流浮动清除浮动学习路径：1.浮动的作用2.浮动的代码3.浮动的特点4.浮动的案例四、浮动目标：能够认识使用浮动的作用，了解浮动的特点早期的作用：图文环绕...
