【静态页面架构】CSS之定位 -优快云博客

博客介绍了CSS架构相关内容，包括浮动是以float属性设置容器位置，块级元素设置浮动后不再独占一行且脱离文档流，内联元素也有相应表现，还提到用clear属性清除浮动，以及未给父级容器设高度且子元素浮动时会出现高度塌陷问题。

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

CSS架构

1.浮动；

是以float属性设置容器指定的位置

<style>
        div {
            width: 200px;
            height: 200px;
        }
        #qq {
            background-color: lightcoral;

            /*float: right;*/
        }
        #yy {
            /*width: 300px;
            height: 300px;*/
            background-color: yellowgreen;
            /* 当前元素设置为浮动后，只影响当前元素后面的所有元素的位置 */
            /*float: left;*/
        }
        #cc {
            background-color: lightskyblue;

            float: left;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>

块级元素；

不再独占一行，多元素之间会水平方向排列设置浮动后，会从页面的文档流脱离

  <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            /*默认宽度是父级宽度的100%
              高度是后者的所有元素高度之和*/
            float: left;
            /*左浮动*/
               /*
                * 宽度默认是 0 或者所有后代元素宽度之和
                * 高度默认是 0 或者所有后代元素高度之和

                多个块级元素都设置为浮动后 -> 垂直方向排列变为水平方向排列
                * 如果占满父级元素宽度的100%后，会自动换行
                */
        }
    </style>
</head>
<body>
<div></div>
</body>

示意图；

内联元素；

<style>
        span{
            background-color: red;
            width: 200px;
            height: 200px;
            /*宽和高是以内容撑起*/
            /*设置宽高属性是无效的*/
            float: left;
            /*设置完浮动后
              其宽高属性才有效
              多个内联元素之间依旧是水平方向的排列*/
        }
    </style>
</head>
<body>
<span>呼延觉罗</span>
<span>爱新觉罗</span>
</body>

示意图；

清除浮动；

以clear属性来设置清除浮动

<style>
        div{
            width: 200px;
            height: 200px;
            float: left;
        }
        #qq{
            background-color: red;

        }
        #yy{
            background-color: blue;
            clear: both;
            /*清除浮动*/
        }
        #cc{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>

示意图；

高度塌陷；

在没有给父级容器设置高度，而且设置子元素浮动，父级失去高度

<style>
        .qq{
            border: 10px solid black;
            overflow: hidden;
        }
        .hh{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
<div class="qq">
    <div class="hh"></div>
</div>
</body>

示意图；