CSS自适应布局方法小结

最新推荐文章于 2024-04-11 00:14:29 发布

一只爱笑的猫

最新推荐文章于 2024-04-11 00:14:29 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/Yzaxdm/article/details/97619003

版权

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

摘要由CSDN通过智能技术生成

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属性后，父元素的高度没有被完全撑开。
解决上述问题的方法，就会需要清除浮动，本文介绍一

最低0.47元/天解锁文章

一只爱笑的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS自适应布局方法小结

CSS脱离文档流的方法：脱离文档流：元素从普通布局排版中拿走（1）float<html><head> <style> .float{ float: left; width:100px; height: 100px; border: 1px solid ...
复制链接

扫一扫