浮动
结构伪类选择器
| 选择器 | 说明 |
|---|---|
E:first-child{} | 匹配父元素第一个子元素，并且是E元素 |
E:last-child{} | 匹配父元素最后一个子元素，并且是E元素 |
E:nth-child(n){} | 匹配父元素中的第n个元素，并且是E元素 |
E:nth-last-child(n){} | 匹配父元素中倒数第n个元素，并且是E元素 |
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n-1、2n+1、odd |
| 找到前5个 | -n+5 |
| 找到从第五个往后 | n+5 |
伪元素
| 伪元素 | 作用 |
|---|---|
| ::before | 在父元素内容的最前面添加一个伪元素 |
| ::after | 在父元素内容的最后面添加一个伪元素 |
- 必须设置
content属性才能生效 - 伪元素默认是行内样式
标准流
名词解释
又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了以何种方式排列元素
常见标准流排版规则
块级元素：从上往下、垂直布局、独占一行 行内元素或行内块元素：从左至右、水平布局、空间不够自动换行
浮动
浮动的代码
div {
float: left
float: right////不能共存
}浮动的效果
浮动的特点
- 浮动元素会脱离标准流(简称：脱标)，在标准流中不占位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右排列
CSS书写顺序
float/position/display
盒子模型(margin、padding、borde)
文字样式
清除浮动
直接设置父元素高度
相关信息
父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置
额外标签法
单伪元素清除法
双伪元素清除法
父元素设置overflow属性
小结
| 方法 | 操作 | 优点 | 缺点 |
|---|---|---|---|
| 直接设置父元素高度 | 父元素设置高度 | 简单粗暴、方便 | 有些布局不能固定父元素高度 |
| 额外标签法 | 1.在父元素内容的最后添加一个块级元素 2.给添加的块级元素设置 clear:both | 会添加额外标签，使得HTML结构复杂 | |
| 单伪元素清除法 | 用一个伪元素替代额外标签 | 项目中使用，直接给标签添加类即可清除浮动 | |
| 双伪元素清除法 | 使用两个伪元素清除浮动 | 项目中使用，直接给标签加类即可清除浮动 | |
| 父元素设置overflow | 方便 |