浮动定位与bfc边距合并

2017-06-28 本文已影响0人 hellowade

问题1：浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

特征：

脱离文档的普通流
不被其他块级元素所感知，但可被块级元素中的文本、图像等行内元素所感知。
直到碰到父元素的包含框或子元素的包含框才停止

影响：

父容器感知不到浮动元素的存在，父容器的高度会塌陷
其他浮动元素碰到该浮动元素时，会停止浮动
普通元素感知不到浮动元素，继续按文档流排列，浮动元素覆盖普通元素，类似下图

浮动元素覆盖普通元素
文字受到浮动元素的影响，移动以留出空间，围绕浮动元素排列（行框缩短）

问题2：清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动:在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
方法：

在父元素最后添加一个空的div标签，对它清理浮动。
对父元素设置float:left/right或 display：inline-block或者position:absolute/fixed或overflow：hidden

问题3：有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

普通流是默认的定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这是我们常见方式。
浮动，float:left、float:right两个常用属性，参考点为其父元素。
position:absolute生成绝对定位元素，绝对定位元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于最初的包含块。绝对定位的元素框从文档流完全删除，因此不占据空间.
position定位几种方式
position:static该关键字指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
position:relative 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置。不脱离文档流，相对于自身原本位置定位。
常作用于父元素中，给绝对定位的子元素当定位参考
position:absolute脱离文档流，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，偏移是参考其第一个定位父元素。
position:fixed不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，偏移是参考浏览器窗口。
position:sticky盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

问题4：z-index 有什么作用? 如何使用

z-index 属性指定了一个元素及其子元素的 z-order。当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素（即position属性值是非static的元素），z-index 属性指定：
元素在当前堆叠上下文中的堆叠层级。
元素是否创建一个新的本地堆叠上下文。

z-index属性只对定位元素有效

动手练习

问题5：`position:relative`和负`margin`都可以使元素位置发生偏移?二者有什么区别

position:relative是在自身的文档流中让自己显示上发生偏移，文档流中其他元素不会因为它的偏移而产生位置上的变化；负margin是让元素的外边框产生空隙从而发生偏移，此偏移会影响到元素后面的元素的位置。

position:relative定位居中

margin定位居中

问题6：BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

1.BFC（Block Format Content）:BFC的全称是Block Format Content——块级格式化上下文：浮动、绝对定位的元素(absolute、fixed定位)、块容器(display属性为inline-block,table-cells,table-captions)、以及带有overflow属性(该属性值不为visible)的display为block的块级元素会建立新的块级格式化上下文——元素们处于同一个块级格式化上下文时，会遵守相同的规则/格式(例如垂直排列的两个元素的margin会重叠)，但是处于不同的块级格式化上下文时，元素的排列展示遵守的规则/格式是不同的(处于不同BFC的垂直排列的两个元素的margin是不会重叠的)
2.对父元素设：

float:left/right
display：inline-block
position:absolute/fixed
overflow：hidden
3.见下面三个例子
阻止垂直外边距折叠
在p的父元素div上设置bfc，可以把它的背景颜色给显示出来。
父子外边距合并
包含浮动
设置父元素为bfc，高度恢复。
父元素高度塌陷
不会重叠浮动元素
浮动元素不重叠