AitSchool

浮动

CSS 的定位模式有

  • 常规流
  • 浮动
  • 绝对定位

常规流

  • 除根元素、浮动元素和绝对定位元素外，其他元素都在常规流之内
  • 而根元素、浮动元素和绝对定位元素会脱离常规流
  • 常规流中的盒子，属于块级格式化上下文或行级格式化上下文

块级格式化上下文

（ BFC Block Formatting Context ）

  • 盒子在容器内从上到下一个接一个地放置
  • 两个兄弟盒子之间的垂直距离由 margin 属性决定
  • 同一个 BFC 内垂直 margin 会合并
  • 盒子的外边缘紧挨容器左边

BFC 的规则

  • 浮动不会影响到BFC的外部元素
  • 高度会包含其内部的浮动元素
  • 不会和浮动元素重叠
  • 可以通过 overflow: hidden 等方式创建

BFC 的创建

  • 浮动
  • 绝对定位
  • 非块级别的容器（inline-block)
  • overflow 属性非 visible 的块框

BFC 的作用

  • 清除浮动
  • 防止 margin 折叠
  • 双栏布局

行级上下文

（ IFC Inline Formatting Context )

  • 盒子一个接一个的水平放置
  • 盒子之间的水平 margin ， border 和 padding 都有效 （ margin 不会发生合并 ）
  • 同一行的盒子所在的矩型区域叫行盒
  • 当一个行盒放不下上下文中的所有盒子时，会被分到多个垂直堆叠的行盒里
  • 行盒的水平分布由 text-align 属性决定
  • 如果一个行级无法分割（单词、inline-bock），该元素会被作为一个整体决定分布在哪一个行盒子

浮动

  • 浮动元素从常规流中脱离，被漂浮在容器（包含块）左边或右边。
  • 浮动盒会一直漂到其外边缘紧挨容器边缘或另一个浮动盒。
  • 浮动元素不会影响到其后面的流内块级盒子。
  • 浮动元素后面的行级盒子会变短以避开浮动元素。

清除浮动

clear 用于指定元素哪一条边不能与之前的浮动框相邻，取值：left 、 right 、both，常用于清除浮动

.clearfix::after{
    content: '';
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

资料

← 定位 →