前端CSS——浮动

#博学谷IT学习技术支持#

一、结构伪类选择器

1、作用与优势：

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

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

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

2、选择器：

E:first-child{ }    匹配父元素中第一个子元素，并且是E元素

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

E:nth-child(n){ }  匹配父元素中第n个子元素，并且是E元素

E:nth--last-child(n){ }  匹配父元素中倒数第n个子元素，并且是E元素

3、n的注意点：

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

通过n可以组成常见公式

偶数 ----- 2n、even

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

找到前五个 ----- -n+5

找到从第五个往后 ----- n+5

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

1、区别：

元素：HTML 设置的标签

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

2、种类：

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

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

3、注意点：

必须设置content属性才能生效

伪元素默认是行内元素

三、标准流

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

2、常见标准流排版规则：

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

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

四、浮动

1、浮动的作用

早期的作用：图文环绕

现在的作用：网页布局

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

2、浮动的代码

属性名：float

属性值：left左浮动

               right右浮动

3、浮动的特点

浮动元素会脱标，在标准流中不占位置

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

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

浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

4、书写网页导航步骤：

清除默认的margin和padding

找到ul，去除小圆点

找到li标签，设置浮动让li一行中显示

找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？

方法一：给a标签设置 display : inline-block

方法二：给a标签设置 display : block

方法三：给a设置 float : left

五、清除浮动

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

影响：如果子元素浮动了，此时子元素不能撑开父元素

2、清除浮动的目的：

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

3、清除浮动的方法：

（1）直接设置父元素高度

优点：简单粗暴，方便

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

（2）额外标签法

操作： 在父元素内容的最后添加一个块级元素，给添加的块级元素设置 clear:both

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

（3）单伪元素清除法

.clearfix::after {

    content: '';

    display: block;

    clear: both;

    height: 0;

    visibility: hidden;

}

（4）双伪元素清除法

.clearfix:before,

.clearfix:after {

content: "";

dispaly: table;

},

.clearfix:after {

clear: both;

}

（5）给父元素设置overflow : hidden

六、总结

    今日复习就到这啦，革命尚未成功，我们仍需努力呀！