浮动与定位

发表于

浮动

float属性最初只是用于浮动图像内的文本块，但是现在它已成为在网页上创建多列布局的最常用工具之一。当元素设置浮动属性后，会脱离正常文档流，从而影响到其他元素在页面上的布局排列，先不要着急，总会有好的解决办法。本文将阐述它的有关知识。

浮动的起源

最初，引入float属性是为了能让web开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在他的左边或右边。通常在报纸上可以看到这样的布局。

但web开发人员很快意识到，它可以浮动任何东西，不仅仅是图像，所以浮动的使用范围扩大了。

现在，浮动通常用来创建整个网站的布局，其中包括浮动多列信息，因此他们彼此并排放置（默认行为是列彼此之间的排列顺序和它们在html源中）。浮动的兼容性很好，可以支持到IE4。

浮动的特征

  • 浮动元素会脱离普通文档流，沿着容器的左侧和右侧放置，碰到另一个浮动元素时或容器边缘会停下来。行内元素使用float属性后，具有块级元素的特征，可以对其设置宽高及margin(块级元素与行内元素有什么区别中有相关介绍)。
    普通/正常文档流：
    浏览器根据元素在HTML中出现的位置读取，再按照元素的和模型呈现，具体表现为块级元素从上至下、行内元素在每行中按照从左至右的依次摆放元素。每个元素都会再HTML中占据一个位置，占用的大小和位置由盒模型来决定。

    从图中可以看到，当我们给box1设置右浮动后，box1就脱离了普通文档流，下面的块元素依次上移占据了box1原有的位置。它造成的一个常见后果就是：其父容器（元素）将得不到脱离普通文档流的子元素高度；即当元素设置了浮动后，它的父元素高度会塌陷。
  • 如果没有足够的空间可供浮动，这个浮动元素会跳到下一行，直到有足够的空间位置。

    从图中可以看到浮动元素依次排列，但当位置不够box3的宽度时，box3会在下一行可以容纳其宽度的位置浮动。且浮动元素之间不会产生重叠，说明：相同级别的浮动元素很安全，不用担心会与其它同级别元素相互重叠。而利用position定位的时候很容易出现元素相互覆盖的情况
  • 设置了浮动元素，会将display属性设置为block。宽度默认为auto，也就是说假如不指明宽度，它的宽度会尽可能的小。请看下面实例：

浮动的影响

  • 对父元素的影响
    元素浮动后脱离正常文档流，无法撑开父元素（容器）,会影响父元素的宽高。
  • 对子元素的影响
    假如某个浮动元素没有设置宽高，那么这个浮动元素的宽高取决于子元素所撑开的宽高。（包含了子元素是浮动元素的情况）
  • 对其他浮动元素的影响
    在父容器中排列时，宽高会影响其他浮动元素的排列。
  • 对其它普通元素的影响
    浮动元素会将块级元素覆盖，而行内元素会围绕浮动元素。(详细可参照块级元素与行内元素有什么区别)
    对行内元素的影响
  • 对文字的影响
    和行内元素一样，文字会围绕着浮动元素。

    如何清除浮动

    清除浮动指什么：清除浮动元素脱离普通文档流后造成父容器高度坍塌对其他元素产生的影响。
    为什么要清除浮动？
  1. 对后续元素位置产生影响
    问题一
  2. 父容器高度计算出现问题
    问题二
    清除浮动的方法
    先介绍一种：
    给包含浮动元素的容器设置 clearfix
    1
    2
    3
    4
    5
    .clearfix::after {
      content: " ";
      display: block;
      clear: both;
    }

问题一被解决：

问题二被解决：

聊一聊定位

有几种定位方式？
  • 正常文档流（Normal Flow）
    是浏览器默认的文档布局方式，可以通过设置position属性的值来覆盖默认样式
    • top
    • left
    • righT
    • bottom
  • 静态定位
    position: static; 默认布局方式。
  • 相对定位
    position: relative; 相对默认布局位置进行定位。
    如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
    如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
    1
    2
    3
    4
    5
    .box {
          position: relative;
          left: 300px;
          top: 200px;
        }

对框2设置相对定位
注：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

  • 绝对定位
    position: absolute; 绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位。设置为绝对定位的元素会从普通文档流中完全删除，就好像该元素之前完全不存在一样，因为已经与普通文档流中的元素不在同一个z-index层面上。元素定位后生成一个块级框，而不论原来它在普通文档流中生成何种类型的框。
    定位上下文：指的是绝对定位元素相对于哪个元素定位，默认的定位上下文是<html>。
    注：设置绝对定位后，会覆盖其它非定位元素，可以使用z-index来改变层级。
    z-index：z-index属性设置元素在y轴上的层叠顺序。z-index: 的值默认为auto，设置值为数字，设置的值越大，越靠近显示屏前的我们。当元素z-index的值相同时，文档流中靠后的元素会覆盖前面的元素。
    注：使用z-index必须保证元素的样式中含有定位方式
  • 固定定位
    position: fixed; 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。
  • 粘性定位
    position: sticky; 是相对定位和固定定位的结合。默认情况表现为相对定位，当浏览器窗口顶端与元素的距离等于top属性值时，转变为固定定位。
    可以参考：Macbook Pro产品导航栏
  • 浮动定位
    float 属性定义元素在那个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动，在值不为none的情况下，浮动定位与绝对定位一样会脱离普通文档流。
    可能的值：left/right/none/inherit

    参考资料：

    w3school.com.cn
    MDN float
    再议浮动