CSS浮动

1.结构伪类：

        1.1 结构伪类选择器：

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

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

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

        1.2 选择器：

主意：选择器中E:nth-child(n){}中的n可以为公式，例如：选中偶数则n为2n(even)，选中奇数则n为2n+1/2n-1(odd)；选中前五个则n为-n+5；

        1.2 伪元素：

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

                区别元素：元素是由HTML设置的标签；伪元素是由CSS=模拟出的标签效果；

                种类：

                注意：必须设置content属性才能生效；伪元素默认是行内元素

---

2.浮动：

        2.1 浮动的作用：

                早期：图文环绕；

                现在：网页布局（块标签在一行排列）；

        2.2 浮动的代码：

                float:left;（左浮动）

                float:right;（右浮动）

        2.3 浮动的特点：

                2.3.1 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置（相当于从地面飘到了空中）

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

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

                2.3.4 浮动元素有特殊的效果显示效果（一行可以显示多个，可以设置宽高，即类似行内块元素）；

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

        2.4 浮动失效：当父级的宽度不够，那么子级会自动换行；

---

补充：CSS书写顺序：浏览器的执行效率会更高

        1. 浮动/display；

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

        3. 文字样式

---

3.清除浮动：

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

                        影响：如果子级元素浮动了，父级元素没有设置高度，那么后面的标准流盒子会受

                影响，会显示到上面的位置；

        3.2 原因：子元素浮动后脱标，不占位置；

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

        3.4 解决方法：

                3.4.1. 给父元素设置高度（优点：简单粗暴；缺点：有些布局中不能固定父元素的高度。例如：新闻列表、京东推荐模块）；

                3.4.2. 额外标签法：

                        1. 在父元素内容的最后添加一个块级元素（一般给其class设置为clearfix）

                        2. 给添加的块级元素设置clear:both（清楚左右两侧浮动的影响）;

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

                3.4.3 单伪元素清除法：

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

                        基本写法：

                                               

                        补充写法：（为了兼容性，高版本浏览器没有这个问题）

                                         

                        补充：伪元素要加content，不然显示不出来

                3.4.4 双伪元素清除法：

                        写法：

                                  

补充：下面的.clearfix::after才是真正的清除浮动的代码，上面的。clearfix::before,clearfix::after是解决外边距塌陷问题的；所以当产生外边距塌陷问题是调用clearfix也能解决；

                3.4.5 给父元素设置overflow:hidden;

                        操作：直接给父元素设置overflow:hidden;即可

                        优点：方便；