浮动

2016-08-16 本文已影响0人 Lily的夏天

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

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
（1）外边距合并场景：

父元素与子元素的外边距合并，如下图

父与子合并.png

如上图父元素的上外边距是20px,子元素的上外边距是40px,然后他们上外边距合并为40px。

兄弟元素的外边距合并，如下图

兄弟元素的外边距合并.png

如上图元素1的上下边距是40px,元素2的上外边距是40px,然后他们上外边距合并为40px。

元素自身的外边距合并，如下图

元素自身合并.png
如上图元素2设置了margin:40px;但是因为它没有boder、padding、height都没有，所以它跟上下两个兄弟元素外边距合并了。
（2）如何合并：
1.两个相邻的外边距都是正数时，合并取两者之间较大的值
2.两个相邻的外边距都是负数时，合并取两者绝对值的较大值,如下图：

外边距均为负数.png

3.两个外边距一正一负时，合并为两者的相加的和,如下图：

外边距为一正一负.png
（3）如何不让相邻元素外边距合并

父子关系元素，给父元素加上padding或者border：

父元素加边框.png

形成BFC

形成BFC.png
还有absolute定位，inline-block，overflow等方法形成BFC，在此处不一一列举了。
参考：CSS 外边距合并、外边距合并、深入理解BFC和Margin Collapse

2.去除inline-block内缝隙有哪几种常见方法?

inline-block内缝隙

inline-block的缝隙.png
去除inline-block内缝隙常见方法：

标签不含空格

标签不含空格.png

标签可以换行，但是要保证标签相接的地方没有空格

换行标签相接处无空格.png

利用负margin（一般-4px左右）

负margin.png

利用浮动

利用浮动.png

利用父元素设置font-size:0;然后再给子元素把font-size设置回来

给父元素设置font-size.png

3、父容器使用overflow: auto| hidden撑开高度的原理是什么？

overflow属性值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

BFC的概念：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）
所以综上所诉，overflow: auto| hidden会开启BFC属性，BFC为它的内容开辟了新的摆放空间，这个摆放空间是相对独立的，它会把浮动元素的高度也计算在内，所以高度就撑开了。
参考文档：CSS中为什么overflow:hidden能清除浮动(float)的影响

4、BFC是什么？如何形成BFC，有什么作用?

用float属性（none值除外）；
用绝对定位absolute；
overflow（visible值除外）；
display属性为table-cell, table-caption, inline-block, flex, 或者inline-flex

作用

撑开父元素
阻止外边距合并
清除浮动的文字环绕影响或位置影响

5、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法

高度塌陷是指，在父元素的height为0时，对其内部元素应用浮动属性，浮动属性使元素脱离文档流，而父元素没有元素可以支撑，从而高度塌陷，变为0。
解决方法：
（1）利用空元素清除浮动：

第一种：在html中添加空元素

加空元素.png

第二种：创建伪类元素

伪类元素.png

（2）使用BFC，使父元素按照BFC渲染，把父元素高度撑开
用float属性（none值除外）；用绝对定位absolute；overflow（visible值除外）；display属性为table-cell, table-caption, inline-block, flex, 或者inline-flex。（例子见题1）

6.以下代码每一行的作用是什么？为什么会产生作用？和BFC撑开空间有什么区别？

.clearfix:after{
         content: ''; /*与伪类元素配合使用，内容为空*/
         display: block; /*表现为块级元素，如果不表现，行内元素不会撑开父元素*/
         clear: both;/*清除两边浮动*/
}
.clearfix{ 
        *zoom: 1;/*IE专有属性，缩放比例，也可用于检查BUG，参数设为1的话，多用于清除浮动*/
}

区别：BFC是形成一个内部的独立小空间，不受外部元素影响。而上述方法只是让父元素感知到浮动元素的存在，把内容撑开，不会形成独立的空间。

浮动