页首

前端学习中遇到的问题

目录

1.浮动属性(float)

2.高度塌陷(High collapse)

content

1.浮动属性(float)
  • float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中， 任何元素 都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的 块框 表现得就像浮动框不存在一样。

用法

float:left|right|none|inherit;
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

浮动的特点

  • 脱离原文档流，浮动范围是父级盒子内部
  • 浮动的元素不参与父容器高度的计算
  • 元素浮动之后变为inline-block元素
  • 只有水平浮动，没有垂直浮动
  • 正常文档流中的块级元素会无视浮动的的元素进行布局
  • 行内元素不会忽视浮动的元素，因为行内元素不能设置宽高，但内容受限于行框
  • 浮动元素会贴着父容器边框或其他浮动元素的边框

浮动会参生的问题

  • 子元素脱离文档流不占位，父元素的高度撑不起来，下面的元素会往上移动(父容器高度塌陷)。
2.高度塌陷(High collapse)
什么是高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，不参与父容器的高度计算。
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

下面举个例子

  • 在页面中写两个父子关系的div
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          body {
              padding: 50px;
              margin: 0;
          }
          
          .outter {
              outline: 1px solid #000;
          }
          
          .inner {
              width: 100px;
              height: 100px;
              background: #acacac;
          }
      </style>
  </head>

  <body>
      <div class="outter">
          <div class="inner">

          </div>
          1
      </div>
  </body>

运行结果如图

  • 给子div加上浮动
  .inner {
      width: 100px;
      height: 100px;
      background: #acacac;
      float:left;
  }

运行信息结果如图

可以看到，子元素加完浮动之后没有将父容器的高度撑起来，这便使父容器发生了高度塌陷。若父容器中的元素全部浮动，此时父容器的高度就变成了零。

高度塌陷的解决方法
  1. 给父容器设置固定高度
  • 原理：给父容器手动设置高度，高度不受浮动的影响
  • 优点：简单、代码少、容易理解
  • 缺点：不够灵活
  1. 给父容器添加overflow:hidden;
  • 原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度
  • 优点：简单、代码少、浏览器支持好
  • 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
  1. 结尾处加空div标签 clear:both
  • 原理：添加一个空div,利用css提高的clear:both清除浮动，让父级div能自动获取到高度
  • 优点：简单、代码少、浏览器支持好、不容易出现怪问题
  • 缺点：不好理解，多添加了div，代码量增多万能清除法(更适合整站开发)----最常用的
    给塌陷的元素加：after伪类
  1. 万能清除法(更适合整站开发)----最常用的(给塌陷的元素加：after伪类)
  • 原理：IE8以上和非IE浏览器才支持:after，原理和方法3有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
  • 优点：浏览器支持好、不容易出现怪问题
  • 用法
    在需要清楚浮动的地方添加clearfix类，伪类代码如下
  .clearfix::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      clear: both;
  }
posted @ 2021-07-12 20:56  heart-up  阅读(129)  评论(0)    收藏  举报
页脚