从零开始前端学习[42]:关于浮动元素在窗口缩小情况下，布局下沉的深思

最新推荐文章于 2023-03-14 18:48:38 发布

^_^ 小小码nong

最新推荐文章于 2023-03-14 18:48:38 发布

阅读量2.2k

点赞数 7

分类专栏： # 1.从零开始挑战前端文章标签：布局前端浮动布局混乱布局塌陷

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78443170

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

关于浮动元素在窗口缩小情况下，布局下沉的深思

本博客主要总结下浮动元素下沉

提示
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

关于浮动元素在窗口缩小情况下，布局下沉的深思

我们在做前端项目的时候，浮动，定位等特性是css特性中最重要最重要的要素，但是有时候也面临着一个很尴尬的问题，就是当窗口在缩小的时候，浮动元素会下沉到下一行，这是什么元素导致的？？

先来看一个案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .fl_l{
          float: left;
        }
        .fl-r{
          float: right;
        }
        .clearfix:after{
          content: '';
          display: block;
          height: 0;
          line-height: 0;
          visibility: hidden;
          clear: both;
        }
    .main{
      margin: 30px auto;
      background: deeppink;
    }
    .content p{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background: blue;
      margin: 10px;
    }

  </style>
</head>
<body>
  <div class="main " >
    <div class="content clearfix">
      <p class="fl_l">1</p>
      <p class="fl_l">2</p>
      <p class="fl_l">3</p>
      <p class="fl_l">4</p>
      <p class="fl-r">5</p>
    </div>
  </div>
</body>
</html>

拖动浏览后的图示：

这里写图片描述

看的很清楚对吧，这就是我所要陈述的浏览器塌陷的问题，因为在做pc端的时候，很多时候都是以body为基础的，那么body的宽度变小的时候，怎么让我们的浮动元素的布局不会发生改变呢

首先你得了解什么是浮动吧，浮动不就是使元素脱离了文档流，浮动在原来的文本之上，占有0。5个优先级，然后将原来的块级元素变成行块级元素，然后能够横向的排列的过程么，但是它得有个参考点啊，这个参考点就是父级元素的宽度，如果父级元素的宽度都不是固定的，那么它还的浮动过程不也是相对是动态的么

还有一点要注意浮动元素的特点就是，如果剩余的空间不足以容纳浮动元素的话，这个时候就会进行换行浮动，这也就是浮动元素下沉，布局混乱的最主要的原因

解决方法：要明确浮动元素父级的宽度，或者最小宽度。

对代码进行小小修改来看下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .fl_l{
          float: left;
        }
        .fl-r{
          float: right;
        }
        .clearfix:after{
          content: '';
          display: block;
          height: 0;
          line-height: 0;
          visibility: hidden;
          clear: both;
        }
    .main{
      margin: 30px auto;
      background: deeppink;
      width: 1200px;/*给main添加一个1200px的宽度**/
    }
    .content p{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background: blue;
      margin: 10px;
    }

  </style>
</head>
<body>
  <div class="main " >
    <div class="content clearfix">
      <p class="fl_l">1</p>
      <p class="fl_l">2</p>
      <p class="fl_l">3</p>
      <p class="fl_l">4</p>
      <p class="fl-r">5</p>
    </div>
  </div>
</body>
</html>

对main添加了一个固定的宽度
显示如下

这里写图片描述
对于PC浏览器来说，很多时候没有办法把body的宽度给固定了，那样有些网页就被固定化了。同样，如果把main给固定下来的话，这样也是不科学的，因为很多时候，页面中的盒子都是充满body的，这个时候就需要用到min-width了，最小宽度

使用min-width来进行修正操作:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .fl_l{
          float: left;
        }
        .fl-r{
          float: right;
        }
        .clearfix:after{
          content: '';
          display: block;
          height: 0;
          line-height: 0;
          visibility: hidden;
          clear: both;
        }
    .main{
      margin: 30px auto;
      background: deeppink;
      min-width: 1200px;/**使用min-width来避免布局混乱*/
    }
    .content p{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background: blue;
      margin: 10px;
    }

  </style>
</head>
<body>
  <div class="main " >
    <div class="content clearfix">
      <p class="fl_l">1</p>
      <p class="fl_l">2</p>
      <p class="fl_l">3</p>
      <p class="fl_l">4</p>
      <p class="fl-r">5</p>
    </div>
  </div>
</body>
</html>

这里写图片描述

从上面可以看到，其实布局的宽度还是body的，但是这个时候在拖拉的过程中，并不会引起布局塌陷了，我个人觉得使用min-width的是比较好的。

这篇博客在截图的时候，背景上有点问题，最近也比较忙

^_^ 小小码nong

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[42]:关于浮动元素在窗口缩小情况下，布局下沉的深思

关于浮动元素在窗口缩小情况下，布局下沉的深思本博客主要总结下浮动元素下沉提示博主：章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041关于浮动元素在窗口缩小情况下，布局下沉的深思我们在做前端项目的时候，浮动，定位等特性是css特性中最重要最重要的要素，但是有时候也面临着一个很尴尬的问题，就是当窗口在缩小的时候，浮动元素会下沉到下一
复制链接

扫一扫

专栏目录