css浮动

一、结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素

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

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

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

2.选择器：        E：first-child{}                 匹配父元素中第一个子元素，并且是E元素

                         E：last-child{}                 匹配父元素中最后一个子元素，并且是E元素

                     E：nth-child（n）{}            匹配父元素中第n个子元素，并且是E元素

                   E：nth-last-child（n）{}       匹配父元素中倒数第n个子元素，并且是E元素

     n的注意点：1.n为：0、1、2、3······

                         2.通过n可以组成常见公式                偶数                 2n、even

                                                                                  奇数              2n+1、2n-1、odd

                                                                               找到前5个              -n-5

                                                                           找到前5个往后           n+5

二、伪元素

目标：能够使用伪元素在网页中创建内容

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

区别：1.元素：HTML设置的标签

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

种类：              ：：before                         在父元素内容的最前添加一个伪元素

                         ：：after                            在父元素内容的最后添加一个伪元素

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

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

三、标准流

目标：能够认识标准流的默认排布方式及其特点

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

常见标准流排版规则：1.块级元素：从上往下，垂直布局，独占一行

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

四、浮动

1.1浮动的作用                          早期的作用：图文环绕

                                                 现在的作用：网页布局

2.1浮动的代码                          float

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

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

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

                                            4.浮动元素有特殊的显示效果            一行可以显示多个

                                                                                                      可以设置宽高

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

1.浮动/display

2.盒子模型：margin  border  padding  宽度高度背景色

3.文字样式

五、清除浮动

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

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

2.清除浮动的方法：   2.1直接设置父元素高度     特点：优点：简单粗暴，方便

                                                                                        缺点：有些布局中不能固定父元素高度

2.2额外标签法   操作：1.在父元素内容的最后添加一个块级元素

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

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

2.3单伪元素清除法      操作：用伪元素替代了额外标签

具体写法

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

2.4双伪元素清除法

操作

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

2.5给父元素设置overflow：hidden

操作：直接给父元素设置overflow：hidden

特点：优点：方便