奇舞-浮动-笔记

定位模式(Positioning schemes)

• 常规流(Normal Flow)
• 浮动(Float)
• 绝对定位(Absolute Positioning)

常规流

• 除根元素，浮动元素和绝对定位元素外，其它元素都是在常规流之内(in-flow)
• 而根元素，浮动和绝对定位元素会脱离常规流(out of flow)
• 常规流中的盒子，属于块级格式化上线文或行级格式化上下文

块级格式化上下文(Block Formatting Content)

• 盒子在容器(包含块) 从上到下一个接一个地方置
• 连个兄弟盒之间的竖直由margin属性决定
• 同一个BFC内垂直margin 会合并
• 盒子的左外边缘爱着容器(包含块)的左边

行级格式化上下文(inline Formatting Content)

• 盒子一个接一个水平防置
• 盒子之间的水平margin border 和padding 都有效
• 同一行盒子所在的矩形区域叫行盒
• 当一个行盒放不下上下文所有的盒子时，会被分到多个垂直堆叠的行盒里
• 行盒内的水平分布由’text-align’属性决定
• 如果一个行级块无法分割，该元素会被作为一个整体决定分布在哪一个行盒

浮动(float)(脱离文档流 但是会占据空间 aboslute 不占据空间)

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

    <article>
        <img src="https://cdn.dribbble.com/users/693064/screenshots/4406954/1_1x.png">
        <p>
            Coalhouse Fort is an English artillery fort built in the 1860s to guard the lower Thames from seaborne attack. It stands at Coalhouse Point in Essex on the north bank of the river, at a location near East Tilbury that was vulnerable to raiders and invaders. It was the last in a series
        </p>
    </article>
//css
img {
    float: left;
}
p {
	font-size: 14px;
	line-height: 1.8;
}
   

clar

• 指定元素那一边不能与之前的浮动框相邻
• 取值 left | right | both

clearfix

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

块级格式化上下文(BFC) 的特性

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

BFC的创建

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

BFC 的作用

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

格式化上下文

块级格式化上下文	Block Formatting Context   BFC
内联格式化上下文	Inline Formatting Context	IFC
Table 布局	            able Formatting Context	TFC
Flex 布局	                Flex Formatting ContextFFC
Grid 布局                 Grid Formatting Context	GFC

块级格式化上下文

• 默认情况，根元素 会创建一个 BFC
• 满足以下任意条件，也会创建一个 BFC

display: inline-block | table-cell | table-caption | flex；
zoom: 1;  /* IE 有类似的概念 hasLayout */

overflow: hidden | auto | scroll; /* 不是 visible 的 */

float: left | right; /* 不是 none 的 */
position: absolute | fixed; /* 绝对定位的元素 */

在一个 BFC 内部 …

• 块级盒子/包含块
  • 从上到下一个接一个放置
  • 两个相邻的，在垂直方向上的 margin 会自动合并
• BFC 是个隔离的独立容器，孩子们和外部互不影响
  • 对外：margin 各是各的
  • 对内：会自动包含 float 元素

在一个 IFC 内部 …

• 内联盒子们
  • 一个接一个水平放置，宽度不足就换行
  • 每行生成一个匿名内联行盒（Line Box）
    • 高度：按本行中最高的来
    • 对齐：text-align, vertical-align
• 内联的大小计算
  • 水平的 padding, border, margin 都会生效
  • 垂直的高度由 line-height 决定