详解为何设定overflow为hidden能够消除波动带来的危

2021-01-20 18:20 jianzhan

1.难题发源

在平常的业务流程开发设计写CSS中,以便考虑网页页面合理布局,元素的波动特点大家用的不可以再多了。应用波动确实可以处理1些合理布局难题,可是也带了1些不良反应危害,例如,父元素高宽比塌陷,大家有好几种能够消除波动的方式,最常见的便是设定父元素的overflow:hidden这个特性,每次在写编码的情况下一直这样写,可是,自身从没深层思索过这些写为何可以消除波动,近期,自身也查阅了1些材料,谈谈自身的了解。

2.场景再现

先上编码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF⑻">
  <title>消除波动</title>
  <style>
    .container{
      border: 1px solid #000;
     background: #0f0;
    }
   .child{
     float: left;
   }
  </style>
</head>
<body>
<div class="container">
 <div class="child">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam dolorem eligendi laudantium libero magnam magni numquam voluptas voluptatem voluptatibus? Consequuntur delectus dolorem esse explicabo minus neque non quaerat voluptatum!
 </div>
</div>
</body>
</html>

编码很简易,便是父元素container里边包括了1个子div元素child,随后大家使子元素的div向左波动,网页页面展现实际效果以下:

結果看来,父元素只显示信息了4个方位边框的高宽比,情况色调未显示信息,这是由于子元素波动摆脱文本文档流导致父元素高宽比塌陷。

3.处理方式

 .container{
      border: 1px solid #000;
      background: #0f0;
      overflow: hidden;
    }

只在container父元素加了1行overflow:hidden

网页页面展现实际效果以下:

父元素高宽比被撑起来了,情况色调也显示信息出来了。

4.BFC定义

大家先掌握1个名词:BFC(block formatting context),汉语为“块级文件格式化左右文”。

先记牢1个标准: 假如1个元素具备BFC,那末內部元素再如何翻江搅海,覆雨翻云,都不容易危害外面的元素。因此,BFC元素是不能能产生margin重合的,由于margin重合会危害外面的元素的;BFC元素还可以用来清晰波动带来的危害,由于假如不清晰,子元素波动则会导致父元素高宽比塌陷,必定会危害后边元素的合理布局和精准定位,这明显有违BFC元素的子元素不容易危害外界元素的设置。

下列状况会开启BFC:

  • <html>根元素
  • float的值不为none
  • overflow的值为auto,scroll,hidden
  • display的值为table-cell,table-caption和inline--block中的任何1个
  • position的值不为relative和static

明显大家在设定overflow值为hidden时使container元素具备BFC,那末子元素child波动便不容易带来父元素的高宽比塌陷危害。

5.总结

设定overflow为hidden使元素具备BFC而不容易受子元素的危害,可是当子元素过量必须翻转显示信息时,大家能够设定overflow的值为auto或acroll,超过父元素以外的元素会被掩藏。应用overflo:hidden也具备1定的局限性,因此大家应当依据实际的业务流程情景来挑选适合的方式。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。