层次选择器 / 组合器

除了基础选择器，我们还可以用层级选择器，或者叫组合器

由于HTML文档大体上呈现一种层次的结构：html文档 --> body --> 各级标签...

我们就可以利用这种层次的关系来对HTML文档格式化

示例文档：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div>
    <span>s1</span>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <h3>h3</h3>h3>
</div>
<div>
    <p>
        <span>s2</span>
    </p>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
    </ul>
</div>

初始样式：

1
2
3
4
* {
    margin: 0;
    padding: 0;
}

后代组合器

" "（空格）组合器选择前一个元素的后代元素。语法A B，将匹配位于A元素之内任意位置的B元素

1
2
3
div span {
    background-color: #9999cc;
}

image-20221117152654747

直接后代组合器

>组合器选择前一个元素的直接后代元素。语法A > B，将仅选择位于A次级的B元素

1
2
3
div > span {
    background-color: #9999cc;
}

image-20221117152713996

一般兄弟组合器

~组合器选择后一个元素在前一个元素后面的任意位置，并拥有同一父元素。语法A ~ B，将选择在同一父元素下，A元素后的所有B元素

1
2
3
span ~ h3 {
    background-color: #9999cc;
}

image-20221117152726797

紧邻兄弟组合器

+组合器选择相邻元素，并拥有同一父元素。语法A + B，将选择同一父元素下，紧邻A的B元素

1
2
3
span + h3 {
    background-color: #9999cc;
}

image-20221117152737210

浮动 float

参考文章：

经验分享：CSS浮动(float,clear)通俗讲解 - 杨元 - 博客园 (cnblogs.com)

float可以键入的值

值 描述
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动
inherit 从父元素继承float的值

浮动的理解

div为块级元素，在默认情况下，div会在页面独占一行，自上而下的排列，也就是文档的标准流

image-20221115181012615

如上，我们发现box3、box4虽然看起来可以在一行内放下，但是box4依旧不会排在box3后面，因为标准流中的div元素会在页面中独立一行

如果我们需要在一行内显示多个div元素来达到布局的效果，那么标准流很明显无法满足这个要求，这里我们就需要用到浮动

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次

假如我们这时候让box2向左浮动（float:left），会出现这样的情况

image-20221115184611117

box3被box2挡住了一部分。因为box2脱离了标准流，而box1、box3、box4依然存在标准流中，因此box3、box4自动向上移动，到达了box2原本所在的位置，形成新的标准流

如果我们将box2向右浮动（float:right），就会出现这种效果

image-20221115185103550

很显然验证了我们上面的说法。

如果我们将多个盒子都进行浮动，那出现的效果会是怎么样的呢？

我们将box2、box3都向左浮动：

image-20221115200224687

box3接在了box2后面，box4上移到了box1下面与box1形成新的标准流。

如果我们尝试不将相邻的两个box都设置为浮动，会出现什么情况？将box2和box4都设置为向左浮动，会出现这种情况：

image-20221115205730142

box4没有上移与box2相接，接在了box3的下面，我们再来看看将box2和box4设置为向右浮动：

image-20221115205852383

得到了上面的图的分离版本，因此我们可以得到一个结论：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前，远离页面边缘的一端是后。

为了更清晰明了，我将其分了一下点

  • A为浮动的div元素

  • A的上一个div元素B是浮动，则A会跟随C后

  • A的上一个div元素C是标准流中的元素，则A顶部与C的底部在同一平面

  • div的顺序是由div在HTML文档中顺序决定

  • 跟随的顺序是根据距离网页边缘判断，靠近网页边缘为前，远离网页边缘为后

    image-20221115211406244

清除浮动

通过上面的内容，我们可以简单理解为，在标准流中，元素是竖向排列的，在浮动中，元素是横向排列的

而清除浮动可以理解为打破横向排列

清除浮动的属性是clear

clear可以填入的属性有

值 描述
none 默认值，不清除浮动
left 不允许左边有浮动对象
right 不允许右边有浮动对象
both 不允许左右边有浮动对象

对于清除浮动这个属性，有一个非常重要的特性：

这个属性只能影响使用清除元素的本身，不能影响其他元素

如何理解这句话呢？

image-20221116010753322

有两个浮动的box，若我们想让box2排列在box1下面，就像box1无浮动，box2浮动那样，按照我们看到文档的一般想法，是在box1上使用clear:right，以此来达到“不允许右边有浮动对象”的效果

但是，我们提到了只能影响本身的这个特性，因此我们需要在box2本身去使用clear属性，让box2clear:left，不允许其左边有浮动属性，迫使box2下移一行：

image-20221116011750381

以上就是浮动的基本的概念了