CSS自适应布局方法小结

最新推荐文章于 2025-06-13 14:39:59 发布

原创最新推荐文章于 2025-06-13 14:39:59 发布 · 375 阅读

CC 4.0 BY-SA版权

本文总结了CSS布局中的一些关键方法，包括脱离文档流的float和定位，块级格式化上下文（BFC）及其作用，清除浮动的多种方式，以及实现两列和三列自适应布局的实践。通过BFC和overflow属性防止高度塌陷，使用伪元素和绝对定位清除浮动，以及运用flex布局实现灵活的布局设计。

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

1、CSS脱离文档流的方法
脱离文档流：元素从普通布局排版中拿走
（1）float

<html>
<head>
    <style>
        .float{
          float: left;
          width:100px;
          height: 100px;
          border: 1px solid rgba(0, 0, 0, .3);
          border-radius: 10px;
        }
        
    </style>
</head>

<body>               
   <div class="float"> 
   <p>我是父元素</p>  
   </div> 
   <div class="other">
     <h1>春</h1>
     <p>盼望着，盼望着，东风来了，春天的脚步近了。
　　一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
　　小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。
　　桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
　　“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。</p>
   </div>     
</body>
</html>

在这里插入图片描述
（2）绝对定位absolute或者固定定位fixed

.float{
          position: absolute;
          width:100px;
          height: 100px;
          border: 1px solid rgba(0, 0, 0, .3);
          border-radius: 10px;
        }

在这里插入图片描述
2、BFC：块级格式化上下文，具有BFC特性的元素可以看为是隔离了的独立容器，容器里的元素不会在布局上面影响外面的元素
形成BFC的条件：
（1）浮动元素：float:left|right;
（2）绝对定位元素：position:absolute|fixed;
（3）display:flex;
（4）overflow:hidden|auto|scroll

BFC的作用：
（1）阻止float的高度塌陷（也就是说使用BFC可以清除浮动）
（2）阻止元素被float覆盖

3、清除浮动的方式
元素设置了float属性后，父元素的边框不能被完全撑开，从而造成了高度塌陷。
如下图所示：
在这里插入图片描述
代码：

<html>
<head>
    <style>
        .container {
            width:600px;
            line-height:120%;
            margin-bottom:8px;
            margin:0 auto;
        }
        .fruit{
          border:1px solid black; 
            width:100%;
            background-color: pink;
        }
        .float div{
      float:left;
                        width: 150px;
                        height: 120px;
                        margin: 20px;
                        border: 1px solid rgba(0, 0, 0, .3);
                        border-radius: 10px;
        }
    </style>
</head>

<body>
<div class="container ">                 
   <div class="fruit"> 
   <p>我是父元素</p>  
   <div class="float">        
      <div>苹果</div>  
      <div>橘子</div>  
      <div>栗子</div>  
      <div>香蕉</div>  
      <div>葡萄</div>  
      <div>橙子</div>  
      <div>南瓜</div>  
      <div>番茄</div>  
      </div>  
   </div>     
</div>  
</body>
</html>

从上面的代码和效果可以看出，子元素设置了float属性后，父元素的高度没有被完全撑开。
解决上述问题的方法，就会需要清除浮动，本文介绍一下击中清除浮动的方式：
（1）添加新元素，样式设置为（clear:both）
clear:both可清除浮动对页面的影响
代码：

 clear{
              clear:both;
            }
    <div class="container ">                 
       <div class="fruit"> 
       <p>我是父元素</p>  
       <div class="float">        
          <div>苹果</div>  
          <div>橘子</div>  
          <div>栗子</div>  
          <div>香蕉</div>  
          <div>葡萄</div>  
          <div>橙子</div>  
          <div>南瓜</div>  
          <div>番茄</div>  
          </div>
          <div class="clear"></div>   
       </div>

效果：
在这里插入图片描述
（2）浮动元素的父级定义（overflow：auto或者overflow：hidden）
该方法利用了BFC，根据overflow：auto将元素设置为BFC，从而防止float的高度塌陷
结果：
CSS样式：

<style>
        .container {
            width:600px;
            line-height:120%;
            margin-bottom:8px;
            margin:0 auto;
        }
        .fruit{
          border:1px solid black; 
            width:100%;
            background-color: pink;
            overflow: auto;
        }
        .float div{
      float:left;
                        width: 150px;
                        height: 120px;
                        margin: 20px;
                        border: 1px solid rgba(0, 0, 0, .3);
                        border-radius: 10px;
        }
</style>

（3）使用伪元素清除浮动
一定要在父元素后添加伪元素
代码如下：

<html>
<head>
    <style>
        .container {
            width:600px;
            line-height:120%;
            margin-bottom:8px;
            margin:0 auto;
        }
        .fruit{
          border:1px solid black; 
            width:100%;
            background-color: pink;
            overflow: hidden;
        }
        .fruit:after{
          content:""; 
          display:block; 
         clear:both;
        }
        .float div{
      float:left;
                        width: 150px;
                        height: 120px;
                        margin: 20px;
                        border: 1px solid rgba(0, 0, 0, .3);
                        border-radius: 10px;
        }
    </style>
</head>

<body>
<div class="container ">                 
   <div class="fruit"> 
   <p>我是父元素</p>  
   <div class="float">        
      <div>苹果</div>  
      <div>橘子</div>  
      <div>栗子</div>  
      <div>香蕉</div>  
      <div>葡萄</div>  
      <div>橙子</div>  
      <div>南瓜</div>  
      <div>番茄</div>  
      </div> 
   </div>     
</div>  
</body>
</html>

或者也可以在浮动元素之前添加伪元素，也可以实现消除float的效果。

4、两列布局：实现左边定宽，右边自适应的布局方式
实现周边定宽，右边自适应的布局方式同样也是采用BFC，通过overflow清除浮动或者采用绝对定位两种方式。
不采用BFC之前的效果为：
在这里插入图片描述
（1）利用overflow：auto设置为BFC容器后

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
       .left{
            float: left;
            width: 100px;
            background-color: pink; 
        }
        .center{
            background-color: red;
            overflow: auto;
            margin: 0 10px 0 110px;
        }
</style>
</head>
<body>
    <div class="parent">
        <div class="left">
        <p>左侧定宽</p>
    </div>
        <div class="center">
        <p class="middle">
            盼望着，盼望着，东风来了，春天的脚步近了。
　　一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
　　小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。</p>
    </div>
</div>
</body>
</html>

效果：
在这里插入图片描述
（2）采用绝对定位
style样式：

<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .parent{
        position: relative;
    }
       .left{
            width: 100px;
            background-color: pink; 
        }
        .center{
            position: absolute;
            background-color: red;
            left: 110px;
            right: 10px;
            top: 0px;
        }
</style>

效果：
在这里插入图片描述
5、三列自适应布局：两边定宽，中间自适应
（1）左右两列脱离文档流，中间一列正常流入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
    .parent{
        height:500px;
    }
.left{
    float:left;
    width:100px;
    height:100%;
    border: 1px solid black;
}
.center{
    overflow:auto;
    border: 1px solid red;
    margin: 0 110px 0 110px;
}
.right{
    float:right;
    width:100px;
    height:100%;
    border: 1px solid black;
}
</style>
</head>
<body>
    <div class="parent">
    <div class="left">
        <p>左侧定宽</p>
    </div>
    <div class="right">
        <p> 右侧定宽</p>
    </div>
    <div class="center">
        <p class="middle">盼望着，盼望着，东风来了，春天的脚步近了。
　　一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
　　小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。
　　桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
　　“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。
　　雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟，树叶儿却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的在雨里静默着。
　　天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份儿事去，“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。</p>
    </div>
</div>
</body>
</html>

效果：
在这里插入图片描述
（2）左右两列使用position：absolute绝对定位后，使左右两列脱离文档流，后面的主内容就可以正常的流入到这两列的上面，然后再利用margin属性设置主内容区域的外边距

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .parent{
        height:500px;
        position: relative;
    }
.left{
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100px;
            background-color: pink; 
        }
        .right{
             position: absolute;
            top: 0px;
            right: 0px;
            height:100%;
            width: 100px;
            background-color: pink;     
        }
        .center{
            background-color: red;
            margin: 0 110px 0 110px;
        }
</style>
</head>
<body>
    <div class="parent">
    <div class="left">
        <p>左侧定宽</p>
    </div>
    <div class="right">
        <p> 右侧定宽</p>
    </div>
    <div class="center">
        <p class="middle">
            盼望着，盼望着，东风来了，春天的脚步近了。
　　一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
　　小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。
　　桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
　　“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。
　　雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟，树叶儿却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的在雨里静默着。
　　天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份儿事去，“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。</p>
    </div>
</div>
</body>
</html>

效果图：
在这里插入图片描述
（3）flex布局：文档按照顺序流入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>倒计时秒杀</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .parent{
        height:500px;
        display: flex;
    }
.left{
            flex:0 0 100px;
            height: 100%;
            width: 100px;
            background-color: pink; 
        }
        .right{
             flex:0 0 100px; /* 表示不放大，不缩小，宽度为100px*/
            height:100%;
            width: 100px;
            background-color: pink;     
        }
        .center{
            background-color: red;
            margin: 0 10px 0 10px;
        }
</style>
</head>
<body>
    <div class="parent">
    <div class="left">
        <p>左侧定宽</p>
    </div>
     <div class="center">
        <p class="middle">
            盼望着，盼望着，东风来了，春天的脚步近了。
　　一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
　　小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。
　　桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
　　“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。
　　雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟，树叶儿却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的在雨里静默着。
　　天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份儿事去，“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。</p>
    </div>
    <div class="right">
        <p> 右侧定宽</p>
    </div>
</div>
</body>
</html>

其中，flex是三个属性的缩写：
flex-grow属性：定义项目的放大属性，默认为0，表示即使存在剩余空间也不会进行放大
Flex-shink属性：定义项目的缩小属性，默认为1，表示空间不足时会对项目进行缩小，如果为1表示不进行缩小的操作
flex-basis：项目占据的空间
比如：flex：0 0 100px 表示对项目不放大，不缩小，宽度为100px
效果：
在这里插入图片描述
（4）先将主内容的父元素流入，并脱离文档流；在分别将左右两列流入，并设置对应的margin-left属性；最后再将主内容区内容部分设置对应的margin属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    .parent{
        height:500px;
    }
 .center{
            float: left;
            width: 100%;

        }
        .left{
            float: left;
            height: 100%;
            width: 100px;
            margin-left: -100%;
            background-color: pink; 
        }
        .right{
            float: left;
            height:100%;
            width: 100px;
            margin-left: -100px;
            background-color: pink;     
        }
       .middle{
            margin: 0 110px 0 110px;
            background-color: red;
        }
</style>
</head>
<body>
    <div class="parent">
        <div class="center">
        <p class="middle">盼望着，盼望着，东风来了，春天的脚步近了。
　　一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
　　小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。
　　桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
　　“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。
　　雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟，树叶儿却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的在雨里静默着。
　　天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份儿事去，“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。</p>
    </div>
    <div class="left">
        <p>左侧定宽</p>
    </div>
    <div class="right">
        <p> 右侧定宽</p>
    </div>
</div>
</body>
</html>

示意图：
在这里插入图片描述
效果图：