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