CSS浮动复习

2017-11-05 本文已影响6人 Klart

特征：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，因此文档普通流中的块级元素感知不到浮动元素的存在。
对父容器影响：浮动元素脱离文档流向左或者向右移动，知道边框碰到父元素的边缘，引起父元素高度塌陷。
对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动，直到有足够的空间，如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能会被卡住；
对普通元素的影响：浮动元素之前的普通元素不受影响，浮动元素之后的普通元素因感知不到浮动元素的尊在会被浮动元素覆盖。
对文字的影响：文字所在行框（或display：inline-block）因为浮动元素的挤压而缩短，从而围绕浮动元素排列。

清除浮动缘由：子元素浮动引起父元素高度塌陷，因为没有预先设置div高度，所以div高度由其包含的子元素高度决定，而浮动脱离文档流，所以子元素并不会被计算高度，此时的div中，相当于div中子元素高度为0，所以发生了父元素高度塌陷现象；
清除浮动：消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题，两种清除浮动思路：
- 1、clear：both/right/left：可以使该元素的左/右不会有浮动元素对它造成影响（只对自己有效）
- overflow大法：在浮动元素的父级元素上加上overflow；

四种不同类型的定位，这会影响元素框生成的方式

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中；
relative
元素框偏移某个距离，元素仍保持其未定位的形状，它原本所占的空间仍保留。
参考点：自身在文档流中的位置。
absolute
元素框从文档流完全删除，并相对其包含块定位。包含块可能是文档中的另一个元素或者是初始化包含快。元素原先在正常文档流中所占的空间会关闭，就好像元素原先不存在一样。元素定位后生成一个块级框，而不论原本他在正常流中生成何种类型的框
参考点：距离最近的费static祖先元素位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始化包含块html（可能是html标签）来定位
使用场景：元素的水平垂直居中；
fixed
元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。
参考点：参考浏览器窗口（视图）的位置
使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边框和底栏

z-index属性设置元素在Z轴方向上的堆叠顺序，数值越大，元素越靠前。可设置负的z-index属性值，z-index仅能在定位元素（position：relative/absolute/fixed）上奏效。

块格式化上下文（block formatting context 是页面CSS视觉渲染（visual CSS rendering）这个过程中的概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有内部元素的包裹性及对外部元素的独立性

BFC有三个特性
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素，嵌套元素，只有他们之间没有阻挡（例如边框，非空内容，padding等）就会发生margin重叠。
  因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了，这样子元素的margin就不会和父元素的margin发生重叠了
- BFC不会重叠浮动元素
- BFC可以包含浮动

如何形成BFC

float 为 left|right
overflow 为 hidden|auto|scroll
display 为 table-cell|table-caption|inline-block
position absolute|fixed（绝对定位）

同属于一个BFC时，两个元素可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡（例如边框，非空内容，padding等）就会发生margin重叠。
解决margin重叠问题：使他们不在同一个BFC，对于两个相邻元素来说，意义不大，对于嵌套元素来说，把父元素设为BFC，子元素的margin就不会和父元素的margin发生重叠。
父子外边距合并范例
解决父子外边距合并

11/05/2017
改什么都没动，只是复习了一下而已
9/25/2017