CSS知识点精学3-CSS浮动

news2025/1/31 22:16:22

结构伪类选择器

伪元素

标准流

浮动

清除浮动

结构伪类选择器

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

1.作用：工具元素在HTML中的结构关系查找元素

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

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

4.选择器

—— 如果写E：nth-child（n）{ }就是改变所有子元素的样式

——如果写E：nth-child（2n）{ }就是改变第偶数个子元素的样式

【同理，写（2n+1）就是奇数个】

n的注意点：

伪元素

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

一般用于设置装饰性的小图，由CSS模拟出的标签效果

比如下图中圆框圈起来的部分

下图中真正的标签里我只写了一个“爱”字，而“老鼠”和“大米”就是通过伪元素实现的

打开代码调试器，可以看到

还可以在伪元素中加样式，可以成功改变伪元素的样式，比如改变颜色或背景颜色，也可以进行元素类型转换，所以就相当于css模拟出来的一个元素。

伪元素中必须设置content属性！

标准流

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

浮动

（浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离）

换行书写：

不换行书写：

可是不换行书写标签会导致代码非常没有可读性，所以我们需要更加完美的解决方法，那就是浮动！

1.浮动的作用

早期作用：发明浮动的时候是为了实现图文环绕，给img设置属性float：left，可以使得文字环绕图片布局，效果如下图

现在作用：网页布局

浮动可以让块级标签完美的在一行中布局

比如给两个div分别设置float：left喝float：right都属性

实现效果：

或者给两个div都设置float：left

实现效果：

这就完美解决了上面提到的第一个问题。

2.浮动的特点

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

2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素，但不会覆盖文本

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

4.浮动元素有特殊的显示效果

—— 一个可以显示多个

—— 可以设置宽高

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

学会了浮动之后可以很快做出想要的布局，比如

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .head {
      height: 40px;
      width: 100%;
      background-color: #333333;
    }

    .center {
      height: 560px;
      width: 1226px;
      margin: 0 auto;
      background-color: gray;
    }

    .head2 {
      width: 100%;
      height: 100px;
      background-color: #ffc0cb;
    }

    .big {}

    .tab1 {
      height: 460px;
      width: 234px;
      background-color: #ffa500;
      float: left;
    }

    .tab2 {
      height: 460px;
      width: 992px;
      background-color: #87ceeb;
      float: right;
    }
  </style>
</head>

<body>
  <div class="head"></div>
  <div class="center">
    <div class="head2"></div>
    <div class="big">
      <div class="tab1"></div>
      <div class="tab2"></div>
    </div>
  </div>
</body>

</html>

建议：（以下顺序为前后书写顺序，这个顺序浏览器执行效率更高，思考时可以不用严格遵循该顺序）

清除浮动

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

原因：子元素浮动后脱标 —>不占位置

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

解决清除浮动的影响的方法：

方法1：直接设置父元素高度

方法2：额外标签法

方法3：单伪元素清除法

无需背诵，这是固定写法。

基本写法：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

补充写法：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
    /* 补充代码，在网页中看不到伪元素*/
    height: 0;
    visibility:hidden;
}

方法4：双伪元素清除法

也无需背诵，可直接复制使用。
.clearfix::before,//出现的意义在于解决外边距塌陷问题
.clearfix::after{
    content:'';
    display: table;
}
.clearfix::after{
    clear:both;
}

//加上以上代码就可以解决所有的外边距塌陷问题和浮动清除问题
复习一下：外边距塌陷是指：父子标签，都是块级元素，子级加margin会影响父级的位置