块格式化背景、折叠边框和浮动容器

本文是小编为大家收集整理的关于块格式化背景、折叠边框和浮动容器的处理方法，想解了块格式化背景、折叠边框和浮动容器的问题怎么解决？块格式化背景、折叠边框和浮动容器问题的解决办法？那么可以参考本文帮助大家快速定位并解决问题。

问题描述

为了了解块格式上下文有什么作用，我试图找出BFC是不是创建的何时发生的事情.

.wrapper {
  width: 740px;
  background: #cccccc;
}
.leftSidebar {
  float: left;
  width: 200px;
}
.rightSidebar {
  float: right;
  width: 200px;
}
.mainContent {
  padding-right: 200px;
  padding-left: 200px;
}
.floatMe {
  float: left;
  background: teal;
  color: #fff;
}

<div class="wrapper">
  <div class="leftSidebar">
    <h2>Heading</h2>
    <pre>.leftSidebar {
  float:left;
  width:200px;
}</pre>
  </div>
  <div class="rightSidebar">
    <h2>Heading</h2>
    <pre>.rightSidebar {
  float:right;
  width:200px;
}</pre>
  </div>
  <div class="mainContent">
    <h2>Heading</h2>
    <pre>.mainContent {
  padding-right:200px;
  padding-left:200px;
}</pre>
    <div class="floatMe">
      <pre>.floatMe {
  float:left;
  background:teal;
  color:#fff;
}</pre>
    </div>
  </div>
</div>

根据该文章(重点是我的):

在现代浏览器中:

所有元素属于相同的块格式上下文如此相邻边缘崩溃.标题的边距"伸出"包装器对抗p.与IE不同，这就是边缘(不是一个黑匣子)在包装器上方创建缝隙.

我无法理解"相同的块格式上下文"是什么意思.我想知道为什么在没有块格式上下文的情况下生产出这种奇怪的布局.

我试图通过将* {border: 1px solid blue;}添加到CSS来弄清确切的布局，但是在此更改之后，整体布局发生了很大变化:现在它的行为就像wrapper 是一个块格式化上下文！

.wrapper {
  width: 740px;
  background: #cccccc;
}
.leftSidebar {
  float: left;
  width: 200px;
}
.rightSidebar {
  float: right;
  width: 200px;
}
.mainContent {
  padding-right: 200px;
  padding-left: 200px;
}
.floatMe {
  float: left;
  background: teal;
  color: #fff;
}
* {
  border: 1px solid blue;
}

<div class="wrapper">
  <div class="leftSidebar">
    <h2>Heading</h2>
    <pre>.leftSidebar {
  float:left;
  width:200px;
}</pre>
  </div>
  <div class="rightSidebar">
    <h2>Heading</h2>
    <pre>.rightSidebar {
  float:right;
  width:200px;
}</pre>
  </div>
  <div class="mainContent">
    <h2>Heading</h2>
    <pre>.mainContent {
  padding-right:200px;
  padding-left:200px;
}</pre>
    <div class="floatMe">
      <pre>.floatMe {
  float:left;
  background:teal;
  color:#fff;
}</pre>
    </div>
  </div>
</div>

请告诉我发生了什么.

推荐答案

很好的问题，让我思考很多！

这里有很多概念，所以我将一个一个一个接一个:

buggy IE :

这个msdn doc :

什么是" Haslayout"，为什么很重要?

有几个错误可以通过强制"布局"来处理的Internet Explorer(一个 IE内部数据结构)在元素上.

显然，这是一个非标准的解决方法，因此带来了很多不一致之处.阅读有关此 there .

块格式上下文(BFC):

摘录摘自/p>

块格式上下文是视觉CSS渲染的一部分网页.这是块框的布局的区域在其中浮子相互作用.

bfcs对于浮动元件的定位和清除非常重要 - 浮动元素仅在同一BFC内影响.当您float一个元素时，它会从流中取出并由"浮动"重新插入.

请参见下面的示例:

wrapper的内部是一个BFC，您可以在其中漂浮一个div向左，另一个div向右.
浮动的元素在围绕未漂浮的元素呈现时将其重新插入到BFC中.

由于您没有clear在BFC中的漂浮物，wrapper高度将延伸到未漂浮的元素的大小.

    body{
      margin: 0;
    }
    *{
      box-sizing: border-box;
    }
    .wrapper{
      border: 1px solid;
    }
    .wrapper > * {
      display: inline-block;
      border: 1px solid red;
      width: 33.33%;
      height: 100px;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
    .center{
      height: 50px;
    }

    <div class="wrapper">
      <div class="left">Left</div>
      <div class="center">Center</div>
      <div class="right">Right</div>
    </div>

请参阅clear bfc中的漂浮时会发生什么 - 现在高度将在wrapper bfc中的正常行为.

    body{
      margin: 0;
    }
    *{
      box-sizing: border-box;
    }
    .wrapper{
      border: 1px solid;
    }
    .wrapper > * {
      display: inline-block;
      border: 1px solid red;
      width: 33.33%;
      height: 100px;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
    .center{
      height: 50px;
    }
    .wrapper:after{
      content: '';
      display: block;
      clear: both;
    }

    <div class="wrapper">
      <div class="left">Left</div>
      <div class="center">Center</div>
      <div class="right">Right</div>
    </div>

折叠边缘:

有时将块的顶部和底部边缘组合在一起(崩溃) 分为一个边缘，其大小是最大的边距组合在其中，一种称为边缘崩溃的行为.

相邻块的边缘崩溃， parent和first/last Child 和空块.请参阅有关 this mdn doc

还请注意:

浮动和绝对位置的元素永远不会崩溃.

那么在这里真正发生了什么?

因此，现在您将了解BFC，以及在第一种情况下(未指定边框)如何工作的浮动容器 - 这就是为什么floatMe floatMe都会放在其即时mainContent包装中，以及为什么确切为什么wrapper和mainContent的高度在那里.
布局和 ie 提到的仅在IE7中，是非标准的.
发生的其他一切都是因为保证金崩溃:

a. h2和pre边缘倒塌(相邻兄弟姐妹)

b. mainContent在body上的边距( parent和first/last child )上的边距转移到顶部以倒塌
c.由于wrapper采用mainContent的高度，wrapper高度也向上移动.

d.当您应用边框时会发生什么是在上面(b)中折叠的保证金被无效！ (有关原因，请参见上面的MDN文档)

希望现在看起来更好.欢呼！

本文地址：https://www.itbaoku.cn/post/866174.html

上一篇：下载属性在Firefox中不工作，但在chrome中工作

下一篇：如何使用php从mysql显示多个图片（blob）？