task10 浮动定位BFC边框合并

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

• 浮动元素特征：1、浮动的框可以根据float属性值左右移动，直到其边缘碰到包含框或者另一个浮动元素的框边缘；2、脱离了普通流并可视，但普通流中的文本和行内元素可感知浮动元素，会主动让位，环绕浮动元素。
• 对父容器：当子元素全部float时，会导致父容器高度塌陷（在没设置height的情况下），无法撑开。
• 其它浮动元素：当父容器宽度过小，无法容纳水平排列的浮动元素时，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素高度不同，那么向下移动的时候可能被卡住。
• 普通元素：普通元素（非float）表现得就像float元素不存在一样，占用位置；但浮动元素在表层，可视，会遮住普通元素。
• 文字：文字会感知浮动元素，主动让位，环绕float元素。

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

• 清除浮动，不是消除float元素，而是清除float元素带来的不利影响，只对清除的元素生效。
• 如何清除浮动：
  1、添加一个空<div> <div style="clear: both"></div>
  2、BFC清理浮动。因为BFC可以包含浮动，将父容器形成一个BFC即可。
  3、通用清理浮动方案

父元素:after{
      content: '';
      display: block;
      clear: both;
}

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

属性position，可应用到所有元素，属性值有以下六种：

• inherit，继承父元素position属性的值。
• static，默认值，没有定位，元素出现在正常文档流中。
• relative，相对定位，通过left、top以及bottom属性进行定位；参考点：元素本身正常位置，不脱离文档流，其它元素还在正常文档流中（坑不动）。使用场景：可用于设置position的祖先元素，或按定义调整元素位置。
• absolute，绝对定位，通过left、top以及bottom属性进行定位；参考点：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，脱离文档流，对其它元素无影响，不占据文档流空间。使用场景：如导航栏的二级菜单，hover可现。
• fixed，固定定位，通过left、top以及bottom属性进行定位；参考点：相对于浏览器窗口定位，脱离文档流，固定元素的包含块是一个视口。应用场景：如模态框效果。
• sticky， CSS3新属性，表现类似position:relative和position:fixed的合体。兼容性不好，不推荐使用。

4、z-index 有什么作用? 如何使用?

通过对定位元素设置z-index属性控制叠放顺序，z-index越高，元素位置越靠上。

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

• position: relative，元素相对于自身位置发生偏移，不影响其他元素的位置，仍在正常文档流中。
• margin：-px;，相对于父元素设置外边距，会影响其他元素的位置。

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

• BFC的全称是Block Format Context，即块级格式化上下文，是页面CSS视觉渲染的一部分，用于决定块级盒子的布局及浮动相互影响范围的一个区域。
• BFC的创建方法：
  （1）根元素，或其它包含根元素的元素
  （2）浮动（元素的float不为none）
  （3）定位（元素的position为absolute或fixed）
  （4）设置行内块级元素（display: inline-block）；
  （5）表格单元格（display: table-cell）
  （6）设置block boxes的overflow的值不为visible（overflow:hidden; scrou; auto）
  （7）弹性盒子flex boxes（display: flex）
  其中最常见的就是overflow:hidden, float:left/right, position: relative/absolute。
• BFC常见特性及作用
  （1） BFC会阻止垂直外边距合并（相邻元素，嵌套元素）。

Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png Paste_Image.png

（2）BFC 不会重叠浮动元素。
让正常元素，与浮动元素不在重叠。因为正常元素中建立了一个新的BFC。

Paste_Image.png Paste_Image.png

（3）BFC可以包含浮动。这一特性用来清除浮动。

Paste_Image.png Paste_Image.png

7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

• 在同一个BFC中，会出现外边距合并，三种合并方式（1）相邻元素，垂直外边距合并；（2）嵌套元素（父子之间），垂直外边距合并。（3）元素自身合并，一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
• 如何合并：（1）两个外边距都是正数，取两者之中的较大者；（2）两个外边距都是负数，取两者之间绝对值较大者；（3）当两个外边距一正一负时，取两者的和。
• 阻止外边距合并：生成BFC，使之不再一个BFC里。
• 父子外边距合并例子
  对于嵌套元素的外边距合并，在父元素中形成BFC，或者父元素加padding或者border等填充内容。

Paste_Image.png Paste_Image.png Paste_Image.png

alert效果
表单效果
模态框效果
导航栏效果