浮动定位BFC

浮动元素的特征，对于父容器、其他浮动元素、普通元素和文字分别都有什么影响？

• 对于父容器
• 浮动元素会生成一个块级框，而不论这个元素本身是什么，即使让一个链接元素浮动，如果其本身是行内元素，也会生成块级框浮动元素的左右边界不能超过包含块的边界
• 一个浮动元素的顶端不能比其父元素的内顶端更高。
• 对于其它浮动元素
• 浮动元素的外边距不会合并
• 一个浮动元素的左（或右）边界必须是原文档中之前出现过的浮动元素的右（或左）边界，除非后出现的浮动元素的顶端在先前出现的浮动元素的底端。这样有效的避免了浮动元素之间的重叠
• 浮动元素的顶端不能比之前所有的浮动元素或块级元素的顶端更高
• 对于普通元素和文字
• 浮动元素脱离文档的普通流，文档中普通流的元素便显的就像浮动元素不存在一样
• 浮动元素会以某种方式从文档流中删除，不过依然会影响布局。
• 如果源文档中一个浮动元素之前出现一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高
• 行内框与一个元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示
• 块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，而内容则在浮动元素“之上”显示

清除浮动的方法

解决浮动父容器高度塌陷问题

父容器高度塌陷

• 在其父容器中最后添加一个空的div，并设置样式clear：both。（缺点是添加了一个无意义的标签）
• 使父容器形成BFC清除浮动

• 通用在其父容器上添加如下：

  
  图片.png

几种定位方式的实现方式，参考点及使用场景

定位机制有三种，分别是普通流（static、relative），浮动，绝对定位（absolute、fixed）。

• inherit 规定从其父元素继承position属性的值
• static 默认值，没有定位，元素出现在正常流中
• absolute 生成绝对定位元素，相对于static定位以外的第一个祖先元素进行定位，可设置上下左右属性值。
• relative 生成相对定位的元素，相对于元素本身正常位置进行定位，可设置上下左右属性值。
• fixed 生成绝对定位的元素，相对于浏览器器窗口进行定位，可设置上下左右属性值。

z-index的作用及使用方法

改变元素相互覆盖的顺序，应用于定位元素，值越大覆盖优先级越大。

position：relative和负margin都可以使元素发生偏移？二者的区别

将元素定位设置为相对定位后，元素的偏移不会对其他元素造成影响，而使用margin进行元素偏移时其他相邻元素也会相应发生偏移，这是我们所不希望的。

BFC是什么？如何生成BFC？BFC的作用？

BFC（block format content）是块级格式上下文，存在IE低版本不兼容的问题，生成BFC的条件有

• float为left|right
• overflow为 hidden|auto|scroll
• display为 table-cell|inline-block|table-caption
• position为 absolute|fixed
• 作用有
• BFC会阻止垂直外边距的折叠
  只有同属一个BFC时，两个元素才有可能发生垂直Margin的重叠
• BFC不会重叠浮动元素
• BFC可以包含浮动（利用此条特性来“清除浮动”，也就是说对父容器添加这些属性形成BFC）

在什么场景下出现外边距合并？如何合并？如何不让相邻元素外边距合并？举例父子外边距合并

• 出现外边距合并的情境
  • 两个元素上下排列，上面的元素有margin-bottom，下面的元素有margin-top
  • 父元素有margin-top/bottom同时子元素也有
  • 空元素同时有margin-top/bottom其上下margin会合并
• 如何合并
• 相邻元素间上下外边距取margin值大的那个
• 父子元素外边距合并会让父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
• 当元素为空元素时，元素的上下margin会合并，并且多个兄弟（父子）空元素的外边距会合并成一个，最终展现出来的外边距会是多个外边距中较大的那个，如果当中有负margin的存在时，合并后的外边距将是最大正边距加上最小负边距
• 如何不让相邻元素外边距合并
  设置浮动；
  设置为display：inline-block；
  使其父元素各形成BFC；
• 举例说明父子外边距合并

图片.png 图片.png