CSS浮动-CSDN博客

本文链接：https://blog.csdn.net/weixin_44697506/article/details/130499719

一、结构伪类和伪元素

1.1 结构伪类选择器

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

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

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

选择器	说明
E:first-child	父元素中第一个子元素E
E:last-child	父元素中最后一个子元素E
E:nth-child(n)	父元素中第n个子元素E
E:nth-last-child(n)	父元素中倒数第n个子元素E

上面表格中的n可以取公式：(n=0、1、2、3…)

功能	公式
偶数	2n even
奇数	2n+1 2n-1 odd
前五个数	-n+5
第五个往后	n+5

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        li:first-child{
            background-color: blue;
        }
        li:last-child{
            color: red;
        }
        li:nth-child(4){
            color: aqua;
        }
        li:nth-child(3n){
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

1.2 伪元素

元素是HTML中的标签；伪元素是CSS模拟出标签的效果，是装饰性内容

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素
::after	在父元素内容的最后面添加一个伪元素

注意：

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

<html lang="en">
<head>
    <style>
        .box::before{
            content: '怒发冲冠';
            color: red;
        }
        .box::after{
            content: '潇潇雨歇';
            color: mediumblue;
        }
    </style>
</head>
<body>
    <div class="box">凭栏处</div>
</body>
</html>
<!--输出：怒发冲冠 凭栏处 潇潇雨歇  -->

二、浮动

标准流：标签的默认排列规则(如div、p默认换行)

**浮动：**早期用于实现图文环绕，现在用于网页布局。

为什么需要浮动？——行内元素或行内块元素换行书写时会产生一个空格。

float: left/right;

浮动的特点：

浮动的标签默认顶对齐，可以用margin-top修改距离顶部的距离
浮动元素会脱离标准流(脱标)，在标准流中不占用位置
浮动元素会比标准流高半个级别，可以覆盖标准流中的元素(但是不能覆盖文字)
浮动找浮动，下一个浮动元素会在上一个浮动元素后面，左右浮动
浮动标签具备行内块标签的特点：一行显示多个、可以设置宽高
浮动之后的标签水平居中不生效(即使用margin:0 auto;不能居中)

<html lang="en">
<head>
  </head>
    <style>
        .box{
            width: 1200px;
            height: 620px;
            background-color: #ccc;
            margin: 0 auto;
        }
        .left{
            float: left;
            width: 400px;
            height: 620px;
            background-color: pink;
        }
        ul li{
            float: left;
            width: 180px;
            height: 300px;
            background-color: #87ceeb;
            margin-bottom: 20px;
            margin-left: 20px;

        }
        .right li{
            list-style: none;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>  
</body>
</html>

CSS书写顺序：

先写浮动、定位、display
再写盒子模型margin border padding 宽度高度背景色
最后设置文字样式

常用CSS语句：

内减模式：box-sizing: border-box;
版心居中:margin:0 auto;

三、清除浮动

**浮动的影响：**在父子级元素中，若父级元素未设置高度，子级元素浮动了，此时子元素不能撑开标准流的块级父元素。

清除浮动

(1) 给父元素设置高度；

(2) 添加额外标签：

在父元素内容的最后添加一个块级元素
然后给添加的块级元素添加类 clearfix

<html lang="en">
<head>
    <style>
        .top{
            width: 900px;
            background-color: pink;
            margin: 0 auto;
        }
        .botton{
            height: 200px;
            background-color: green;
        }
        .left{
            float: left;
            width: 300px;
            height: 400px;
            background-color: blue;
        }
        .right{
            float: right;
            width: 590px;
            height: 400px;
            background-color: skyblue;
        }
      	 /* 清除浮动 */
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>       <!--添加的块级元素  -->
    </div>
    <div class="botton"></div>
</body>
</html>

(3) 单伪元素清除法：用伪标签代替了额外标签

**优点：**直接给父级标签添加clearfix类即可清除浮动。

/* 单伪元素法清除浮动：基本写法 */
        .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;
        }