CSS浮动

最新推荐文章于 2025-05-14 22:15:18 发布

孙张翼翔

最新推荐文章于 2025-05-14 22:15:18 发布

阅读量637

点赞数 24

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80637326/article/details/147919926

版权

css之浮动

结构伪类选择器

E:first-child{}
匹配父元素中第一个子元素，并且是E元素
E:last-child{}
匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}
匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}
匹配父元素中倒数第n个子元素，并且是E元素
语法 :first-child{css属性名：属性值}
n的取值
- 偶数 2n、even
- 奇数 2n+1、2n-1、odd
- 找到前5个 -n+5
- 找到从第5个往后 n+5
作用找到第一个子元素，并且设置样式

伪元素

语法 :before{css属性名：属性值}
:before
在父元素内容的最前添加一个伪元素
:after
在父元素内容的最后添加一个伪元素
作用添加一个元素，并且设置样式
般页面中的非主体内容可以使用伪元素

 
<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
 
        .father::before {
            /* 内容 */
            /* content属性必须添加, 否则伪元素不生效 */
            content: '';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;
 
            /* 默认是行内元素, 宽高不生效 */
            display: block;
        }
 
        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->
 
    <!-- 找父级, 在这个父级里面创建子级标签 -->
 
    <div class="father">爱</div>
 
    <!-- 老鼠爱大米 -->
</body>
</html>

标准流

在网页中默认的占用位置！

浮动

float: left;
早期的作用图文环绕
现在的作用用于排列网页的布局
➢ 浮动元素的特点有哪些?

浮动元素会脱标，在标准流中不占位置
浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果:1 一行可以显示多个 2 可以设置宽高

清除浮动

清除浮动的目的是为了让父级元素的高度自适应
➢ 含义:清除浮动带来的影响
• 影响:如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 清除浮动的目的是什么?
• 需要父元素有高度，从而不影响其他网页元素的布局

常用简单方法

1 直接设置父元素高度
➢ 特点:
优点:简单粗暴，方便
缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块
2 额外标签法
➢ 操作:
在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both
➢ 特点:
• 缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂
3 单伪元素清除法
➢ 操作:用伪元素替代了额外标签
➢ 特点:
• 优点:项目中使用，直接给标签加类即可清除浮动
4 双伪元素清除法
➢ 操作:用伪元素替代了额外标签
➢ 特点:
• 优点:项目中使用，直接给标签加类即可清除浮动
5 overflow属性清除法
➢ 操作:
在父元素中添加 overflow:hidden;
➢ 特点:
• 优点:简单粗暴，方便
• 缺点:会让父元素中的内容被隐藏，无法显示