浮动(二)

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

1.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并



2.当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
如图示,两个div的上外边距都变成了200px



3.一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并

如果这个外边距遇到另一个元素的外边距,它还会发生合并:



注意:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

  • 如何合并?
    1.两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
    2.两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
    3.两个外边距一正一负时,折叠结果是两者的相加的和。
  • 如何不让相邻元素外边距合并?
    1.设置一个是浮动的,垂直margin不会被折叠
    3.设置绝对定位(position:absolute),垂直margin不会被折叠
    4.设置display:inline-block的元素,垂直margin不会被折叠
    5.设置了overflow属性的元素和它的子元素之间的margin不会被折叠(overflow取值为visible除外)

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

1.去掉标签段之间的空格
如图,div之间有空隙



去掉标签间的空格后,空隙消失
可以写成一行:



也可以进行上下拆分:

2.使用负边距

3.使用font-size:0,再设置单独需要的font-size值


4.设置元素浮动

三.父容器使用overflow: auto| hidden撑开高度的原理是什么?

overflow: auto| hidden;后,触发了BFC,BFC元素里面的子孙元素,不会影响外部元素的布局,所以高度会重新计算。

四.BFC是什么?如何形成BFC,有什么作用?

1.BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC布局规则:

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于* 从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与计算

2.哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible
    3.作用
  • 自适应两栏布局
    如图,浮动aslide,但main的左边依然会与包含块的左边相接触



    如图,通过触发main生成BFC, 来实现自适应两栏布局

  • 清除内部浮动
    如图,父元素不能包含住div



    为达到清除内部浮动,我们可以触发contain生成BFC,那么contain在计算高度时,内部的浮动元素child也会参与计算

  • 防止垂直 margin 重叠
    两个div之间的距离为50px,margin重叠了。

在div外面包裹一层容器,并触发该容器生成一个BFC。那么两个div便不属于同一个BFC,就不会发生margin重叠了。

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

  • 浮动元素脱离文档流,父元素由于没有了元素而产生高度塌陷
    解决方法:
    1、在父容器中加入overflow: hidden/auto;
    2、使父容器 float或display:inline-block;
    3、在父容器中添加高度;
    4、在父容器末尾增加一个div,用来清除浮动
  • 使用解决方法有:
    1.给父元素添加高度
    2.父元素也浮动
    3.令父元素形成为BFC
    4.在父元素末尾增加一个div,设置clear:both;来清除浮动
    5.使用如下代码
.clearfix:after{
 content: ''; display: block; clear: both;
}
.clearfix{
 *zoom: 1;
}

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


原因:在父容器的最后添加一个内容为空的元素,该元素存在于文档流中并且清除左右浮动的元素。父元素虽然感知不到浮动元素,但是可以感知本元素,而本元素又必须在浮动元素的下方,所以父元素高度就不会坍塌
与BFC区别:BFC使父容器本身形成一个可以包含浮动元素的独立的空间,上述方法只是撑开了内容,并没有形成独立的空间

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,330评论 1 91
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 693评论 0 2
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 589评论 0 4
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素不在文档的普通流中,它可以...
    饥人谷_Young丶K阅读 194评论 0 0
  • 一 露西是最奇怪的死神。所有死神都这样认为。 她有一个奇怪的规矩。在收割他人性命之前会让他们说出自己一生中的关键词...
    十四块年糕阅读 117评论 0 0
  • 1)此身自由方心安 万里长安大好河山,谁不想荣华富贵,功名加身?朝廷向来是文人武将向往的圣地,封官加爵,功名利禄,...
    青山画味阅读 189评论 0 2
  • 小玥ls阅读 85评论 0 0
  • 第7章 意外 到了表演的时候,那些,大人物,竟然全都是大明星。 我的天哪!我要在这些人面前表演吗?我的...
    优的文化屋阅读 93评论 0 0