css 容易忽略的细节

最新推荐文章于 2025-09-05 11:23:54 发布

原创最新推荐文章于 2025-09-05 11:23:54 发布 · 136 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #细节 #技巧

css容易忽略的细节

文字溢出: 浮动元素溢出内容仍然会有文字环绕现象
内容溢出：溢出部分的层级（定位流 > float流 > 标准流）决定是否被覆盖
- 浮动的子盒子溢出父盒子，父盒子有高度，对父级元素后面的同级元素的影响（是否被覆盖）
- 未浮动的子盒子溢出父盒子，对父级元素后面的同级元素的影响
  -先说说陷阱：侧边栏无法被点击，原因是全部商品分类盒子是溢出的浮动流，然而，其下方的大盒子（版心设置了positon:relative,中间内容区域用margin-left 挤出的偏移量，所以父盒子位置仍然在，只是未设背景，呈透明色，其实还是覆盖在溢出元素的上方）

在这里插入图片描述

出现的现象相关探究

浮动元素溢出父盒子
– 浮动元素（绿）溢出父盒子（黄）, 溢出部分遮盖了与父元素同级的盒子（粉红） –

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box1 {
            width: 200px;
            height: 50px;
            background-color: yellow;
        }
        .box2 {
            width: 200px;
            height: 50px;
            background-color: pink;
        }
        .box1 .box1-son {
            width: 50px;
            height: 100px;
            background-color: green;
            float: left;
        } 

    </style>
</head>
<body>
    <div class="box1">
        <div class="box1-son">
        </div>
    </div>
    <div class="box2"></div>
</body>
</html>

– 标准流（绿）溢出父盒子（黄），溢出部分被父元素的同级元素（粉红）覆盖–
在这里插入图片描述
代码如下

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box1 {
            width: 200px;
            height: 50px;
            background-color: yellow;
        }
        .box2 {
            width: 200px;
            height: 50px;
            background-color: pink;
        }
        .box1 .box1-son {
            width: 50px;
            height: 100px;
            background-color: green;
            /* float: left; */
        } 

    </style>
</head>
<body>
    <div class="box1">
        <div class="box1-son">
        </div>
    </div>
    <div class="box2"></div>
</body>
</html>