浮动布局

浮动布局

一. display 布局

• inline 行级标签

  • 同行显示,就相当于纯文本,当一行显示不下换行,如一个字显示不下,就把显示不下的哪个字自动换行. 和纯文本的区别: 就是有标签整体的概念,标签与标签有一个空间的隔断.
  • 支持部分 css 样式,不支持宽高 | 行高(行高会映射到父级 block 标签) | margin 上下
  • content 由文本内容撑开
  • inline 标签只嵌套 inline 标签

• inline-block 行级块标签

  • 同行显示,当一行显示不下,标签会作为一个整体换行显示
  • 支持所有 css 样式
  • content 默认有文本(图片)内容撑开,也可以自定义宽高,当自定义高度后,一定采用自定义宽高(显示区域不足,内容会在标签内部换行显示,可能超出显示区域)
  • inline-block 标签不建议嵌套任意标签

• block 块级标签

  • 异行显示,不管自身区域多大,都会独占一行
  • 支持所有 css 样式
  • content width 默认继承父级, height 有内容(文本,图片,子标签)撑开,当设置自定义宽高后,一定采用自定义宽高
  • block 可以嵌套任意标签,作为结构和布局层.

二., overflow 知识

overflow : 处理内容超出盒子显示区域

• auto: 自定义,内容超出滚动显示超出部分,不超出则正常显示
• scroll: 一直采用滚动方式显示
• hidden: 隐藏超出盒子显示范围的内容

/* overflow: auto | scroll | hidden */
.d {
    overflow: auto
}

三.文档流(normal flow)

1.概念

本质为 normal flow(普通流\常规流)将窗体自上而下分成一行一行,块级元素从上至下,行内元素在每行中从左至右的循序以此排放元素.

2.BFC (Block formatting context)

块级格式化上下文,它是一个独立的渲染区域,只有 Block-level box 参与,它规定了内部的 Block-level Box 如果布局,并且与这个区域外部毫不相干.

3.BFC 规则

1️⃣ 内部的 Box 会在垂直方向,一个接一个地放置;
2️⃣ Box 自身垂直方向的位置由 margin-top 决定,属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
3️⃣ Box 的自身水平方向的位置由 margin 左或右决定(具体已经参照 BFC 方位),属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加.

三.浮动布局

1.什么是 float, 为什么用它?

• float:浮动布局,改变 BFC 的参照方位
• 块级盒子就会同行显示

2.基本语法

float: left|right: 左|右 浮动
left: BFC参照方向从左向右
right: BFC参照方向从右向左

/*浮动的区域由父级的 width 决定*/

3.浮动布局问题

• 子级浮动了,不再撑开父级的高度, 那么父级如果拥有兄弟标签,可能就会出现布局重叠问题

4.清浮动

• 目的: 对父级所在容器中的 Block-level Box 布局不产生影响
• 原理: 在浮动布局情况下, 让父级获得合适的高度

① 浮动的父级设置高度
super {
    height: npx
}
② 浮动的父级兄弟设置clear
/* 通常直接使用 both */
brother {
    clear: left | right |both
}
③ 浮动的父级设置overflow 属性
super {
    overflow: hidden
}
④ 浮动的父级伪类清浮动
super:after {
    content: "";
    display: block;
    clear: left | right | both;
}

5.浮动布局的总结

• ① 同一结构下,如果采用浮动布局,所有的同一级别兄弟标签都要采用浮动布局.
• ② 浮动布局的盒子宽度在没有设定时会自适应内容宽度.