HTML与CSS学习笔记

CSS浮动与定位

简述

CSS定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

在CSS中,正常的文档流是各元素一个接一个地排列,就像一群乖乖排队的小朋友。浮动就是把元素从文档流中移除,不参与排队。但被浮动的元素不是浮在空中,而是占据它的地盘,其他元素的内容只能绕道而行。

CSS浮动详解

浮动元素的摆放位置由一系列规则决定,这些规则如下:

  1. 浮动元素的左右边界不能超出其包含块的内边界。

    float规则1
    图1 向左(或向右)浮动
  2. 浮动元素的左右边界不能与前面的浮动元素的左右边界重叠,除非后出现的浮动元素的顶端在先出现的浮动元素的下面。

    float规则2
    图2 避免浮动产生重叠
  3. 一个右浮动元素的左边界不会在其左边任何左浮动元素的右边界的左边。

    float规则3
    图3 进一步防止重叠
  4. 浮动元素的顶端不会超出其父元素的内顶端。

    float规则4
    图4 浮动元素不能向上一直浮动
  5. 浮动元素的顶端不能比之前浮动元素的顶端更高

    float规则5
    图5 使浮动元素总在其之前浮动元素的下面
  6. 如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。

    float规则6
    图6 使浮动元素在其上下文内
  7. 左浮动元素的左边有另一个浮动元素,前者的右边界不能超出其包含块的右边界。

    float规则7
    图7 如果没有足够的空间,浮动元素会被挤到新行
  8. 浮动元素必须尽可能高地放置。

    float规则8
    图8 满足其他约束条件的前提下,浮动得尽可能高
  9. 左浮动元素必须向左尽可能远,右浮动元素必须向右尽可能远。

    float规则9
    图9 向左尽可能远