9.css-优快云博客

本文链接：https://blog.youkuaiyun.com/LIQINGFENG123456/article/details/117518738

本文详细介绍了CSS中的浮动属性，包括如何通过`float`实现元素的左右浮动以及由此引发的父级边框塌陷问题，以及四种解决塌陷的方法。此外，还探讨了相对定位、绝对定位和固定定位的概念和应用场景，并展示了`z-index`属性在多层定位元素中的作用。内容覆盖了CSS布局基础和实践技巧，对于前端开发者具有较高的参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.css浮动属性设置与浮动带来的父级边框塌陷问题及解决

display：块级标签元素到行内标签元素的转换

float：浮动属性，是标签元素左右浮动（独立于父标签元素的那种左右移动，看成是漂浮状态的）

clear：（禁止哪侧出现浮动标签元素）

父级边框塌陷问题解决：

第一种方法，增加父级元素的高度
#father{
bored:1px #000 solid;
height:800px;
}
第二种方法，增加一个空的div标签，清除浮动

.clear{ clear:both; margin:0; padding:0; }

第三种方法，在父级元素中加一个 overflow：hidden（自动溢出）
第四种方法（推荐使用），父类标签元素增加一个伪类：after
#father:after{
content:‘’;
display:block;
clear:both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            border: #020202 solid 3px;
        }
        /*起到防止父级标签边框塌陷问题*/
        #div:after{
            content:"";
            clear: both;
            display: block;
        }
        div[class="div1"]{
            border: #FF0000 solid 2px;
            display: inline-block;
            float: right;
            /*是该标签元素内容左右都不能浮动，所以自动作为一行显示*/
            /*clear: both;*/

        }
        div[class="div2"]{
            border: #ff0000 solid 2px;
            display: inline-block;
            float: right;
            clear: both;

        }
        div[class="div3"]{
            border: #ff0000 solid 2px;
            display: inline-block;
            float: right;
            clear: both;

        }
        div[class="div4"]{
             border: #FF0000 solid 2px;
            display: inline-block;
            float: right;
            clear: both;

         }
    </style>

</head>
<body>
   <div id="div">
       <div class="div1"><img src="img/logo.jpg" alt=""></div>
       <div class="div2"><img src="img/regbtn.jpg" alt=""></div>
       <div class="div3"><img src="img/verify_code.jpg" alt=""></div>
       <div class="div4">中国共产党成立100周年万岁！</div>
   </div>
</body>
</html>

2.定位

相对定位（ position: relative）：相对于自己原来的位置进行偏移,仍然在标准文档流中。原来的位置会被保留。

<style>
        body{
           padding:20px;
       }
        div{
            padding: 5px;
            margin: 10px;
            border:1px solid #0000ff;
        }
        #first{
            border:1px solid #0000ff;
            background-color: aqua;
            position:relative;   /*相对定位：上下左右*/
            top:-20px;
            left:20px;
        }
        #second{
            border:1px solid #0000ff;
            background-color: cyan;
            position:relative;
            left:20px;
        }
        #third{
            border:1px solid #0000ff;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>

绝对定位（position: absolute）：没有父级元素定位的前提下，相对于浏览器定位如果父级元素存在定位，我们通常会相对于父级元素进行偏移在父级元素范围内移动相对于父级或浏览器的位置，进行指定的偏移。绝对定位的话，他不在标准文档流中，原来的位置也不会被保留。（简单记：相对于浏览器定位如果设置了父标签的定位属性，则是相对于父标签元素位置的定位。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        #div{
            height: 300px;
            width: 300px;
            margin: 30px;
            /*该标签设置了定位属性，所以字标签的绝对定位是相对于该标签*/
            position: relative;
        }
        .div1{
            height: 200px;
            width: 300px;
            background-color: #0072fd;
        }
        .div2{

        }
        .div3{
            width: 300px;
            height: 30px;
            background-color: #A6A6A6;
            position: absolute;
            left: 100px;
        }
    </style>
</head>

<body>
   <div id="div">
       <div class="div1"></div>
       <div class="div2">浮动弹窗</div>
       <div class="div3"></div>
   </div>
</body>
</html>

固定定位（position: fixed）:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。fixed表示脱离了正常的文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        #div{
            height: 300px;
            width: 300px;
            margin: 30px;
            position: relative;
        }
        .div1{
            height: 200px;
            width: 300px;
            background-color: #0072fd;
        }
        .div2,.div3{
            width: 300px;
            height: 30px;
            position: fixed;
        }
        .div2{
            left: 10px;
        }
        .div3{
            left: 100px;
            background-color: #A6A6A6;
        }

    </style>
</head>

<body>
   <div id="div">
       <div class="div1"></div>
       <div class="div2">浮动弹窗</div>
       <div class="div3"></div>
   </div>
</body>
</html>

z-index属性: z-index:x 其中x（一般选择0-999），x越高，就越优先显示，一般搭配定位属性使用（因为可以将多个标签元素放在同一个地方，然后用z-index设置谁优先显示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        #div{
            height: 300px;
            width: 300px;
            margin: 30px;
            position: relative;
        }
        .div1{
            height: 200px;
            width: 300px;
            background-color: #0072fd;
        }
        .div2,.div3{
            width: 300px;
            height: 30px;
            position: absolute;
        }
        .div2{
            left: 105px;
            top: 175px;
            z-index: 1;
        }
        .div3{
            left: 0px;
            top: 170px;
            z-index: 0;
            background-color: #A6A6A6;
        }

    </style>
</head>

<body>
   <div id="div">
       <div class="div1"></div>
       <div class="div2">浮动弹窗</div>
       <div class="div3"></div>
   </div>
</body>
</html>