CSS 레이아웃과 BFC

BFC 무엇입니까

블록 레벨 배열 상자에 따른 웹 페이지, 블록 레벨 포맷 컨텍스트 (블록 Fromatting 컨텍스트)의 CSS를 렌더링. W3C는 BFC는 다음과 같이 정의 플로트 및 절대 위치 요소, 비 - 블록 레벨 카세트 블록 레벨 용기 (예를 들면, 인라인 블록 테이블 셀들 및 테이블 캡션), 상기 오버 플로우 값은 "visiable"블록 레벨 상자 아니다 우리는 그들의 콘텐츠에 대한 새로운 BFC를 (블록 레벨의 컨텍스트를 포맷)이 생성됩니다. BFC 레이아웃 외부 영향으로부터 소자 및 (인라인 모든 요소 조성물의 행 라인으로 카세트)를 블록 행 카세트 카트리지 BFC는 수직을 따라되는 독립적 인 레이아웃 환경 부모 요소 배열의 테두리입니다. 블록 포맷 맥락합니다 (BFC)는 간단한를 통해 역할을 float이해하기 쉽게 예. 다음 예제에서는 텍스트 이미지와 왼쪽 부동이 들어있는 상자가있다. 우리가 충분한 텍스트가있는 경우, 이미지 및 테두리, 주위 전체 영역을 주위에 떠 있습니다.

// HTML 
<DIV 클래스 = "외부"> 
  <DIV 클래스 = "플로트"> 나는 부유 요소입니다. </ DIV>   내가 외부 상자 안에 텍스트입니다.
</ DIV> // CSS .outer { 
  국경 : 5px 점 RGB ( 214,129,137 ); 
  국경 - 반경 : 5px; 
  폭 : 450 픽셀; 
  패딩 : 10px; 
  마진 - 하단 : 40px; 
} 
. 떠 { 
  패딩 : 10px를; 
  테두리 : 5px 고체 RGBA ( 214,129,137, 0.4 ); 
  국경 - 반경 : 5px; 
  배경 색 : RGBA (233,78,119, 0.4 ); 
  색상 : #fff;





  플로트 : 왼쪽;  
  폭 : 200 픽셀; 
  마진 0 20 픽셀 0 0 ; 
}

나는 텍스트를 제거한 경우, 다음 이미지를 포위하기에 충분한 내용이 아니며, 플로트가 문서 흐름에서 제거되기 때문에, 그래서 테두리 텍스트의 높이까지 상승하고, 이미지 아래에 있습니다.

이는, 우리가 텍스트 프레임의 폭이 텍스트 광고 박스 짧게 플로트 있도록 실로 같이 동일하게 유지 된 요소, 부유 때. 배경 및 테두리는 플로트 뒤에 이유에 표시되는 이유입니다. 우리는 일반적으로이 문제 레이아웃을 해결하는 방법은 두 가지가 있습니다. 한 가지 방법은 그 역할은 다음과 같은 텍스트와 이미지의 요소를 삽입하여 설정하는 것입니다, clearfix 해킹 사용하는 것입니다 clear:both. 또 다른 방법은 사용하는 것입니다 overflow 값이 기본 값이 아닌, 속성을 visible.

.outer { 
  오버 플로우 : 자동; 
}

overflow 이유는 사용이 방식으로 작동 visible 하는 블록 포맷 콘텍스트를 생성하는 초기 값 이외의 값, 및 특징은 플로팅 BFC을 포함한다는 것이다.

BFC는 미니 레이아웃 레이아웃입니다

당신은 페이지 내 미니 레이아웃으로 볼 BFC 수 있습니다. a 요소가 BFC를 생성하면, 모든 콘텐츠가 포함되어 있습니다. 우리가 보았 듯이,이 요소를 떠 포함, 그들은 더 이상 상자의 바닥에서 튀어 나와되지 않습니다. BFC는 다른 유용한 행위로 이어집니다.

BFC는 접는 마진을 방지 할 수있다

마진 합병을 알아보기 다른 과소 CSS 기술이다. 다음 예에서, 회색 배경 색 있다고 가정합니다 div. div 두 개의 탭 p. 외부 div 요소는 margin-bottom 40 픽셀, 라벨 인 p 상단과 하단은 margin 20 픽셀이다.

// html
<div class="outer">
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
</div>
  
// css
.outer {
   background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

因为 p 元素的 margin 和外部 div 上的 margin 之间没有任何东西，所以两个会折叠，因此 p 最终与 div 的顶部和底部齐平。我们在 p 的上方和下方看不到任何灰色。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的!如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。

BFC 可以阻止元素被浮动元素覆盖

你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。如果一个项目创建了一个 BFC，那么该项目将不会包裹任何浮动元素。在下面的例子中，有如下 html 结构：

<div class="outer">
  <div class="float">I am a floated element.</div>
  <div class="text">I am text</div>
</div>

带有 float 类的项被向左浮动，因此 div 中的文本在它环绕 float 之后。

我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为

.text {
  overflow: auto;
}

这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。

在多列布局中使用 BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。例如：

<div class="container">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
</div>

对应的CSS：

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
.column:last-child {
  float: none;
}

未创建 BFC 之前：

添加以下样式创建一个 BFC:

.column:last-child {
  float: none;
  overflow: hidden;
}

现在尽管盒子的宽度稍有改变，但布局不会打破。当然，对多列布局来说这不一定是个好办法，但能避免最后一列下掉。这个问题上弹性盒或许是个更好的解决方案，但这个办法可以用来说明元素在这些环境下的行为。

还有什么能创建 BFC?

除了使用 overflow 创建 BFC 外，其他一些 CSS 属性还创建 BFC。正如我们所看到的，浮动元素创建了 BFC。你的浮动项将包含它里面的任何东西。使用以下方式都能创建 BFC

float 的值不是 none。
position 的值不是 static 或者 relative。
display 的值是 inline-block、table-cell、flex、table-caption 或者inline-flex
overflow 的值不是 visible

创建 BFC 的新方式

使用overflow或其他的方法创建BFC时会有两个问题。首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?他们想要这个组件上的滚动条吗?最安全的做法应该是创建一个 BFC 时并不会带来任何副作用，它内部的元素都安全的呆在这个迷你布局中，这种方法不会引起任何意想不到的问题，也可以理解开发者的意图。CSS 工作组也十分认同这种想法，所以他们定制了一个新的属性值：display:flow-root。flow-root 浏览器支持情况你可以使用display:flow-root安全的创建BFC，来解决上文中提到的各种问题：包裹浮动元素、阻止外边距叠加和阻止围绕浮动元素。

浏览器对该属性的支持目前还是有限的，如果你觉得这个属性值很方便，请投票去让Edge也支持它。不过无论如何，你现在应该已经理解了什么是 BFC，以及如何使用 overflow 或其他方法来包裹浮动，以及知道了 BFC 可以阻止元素去环绕浮动元素，如果你想使用弹性或网格布局可以在一些不支持他们的浏览器中使用 BFC 的这些特性做降级处理。理解浏览器如何布置网页是非常基础的。虽然有时看起来无关紧要，但是这些小知识可以加快创建和调试 CSS 布局所需的时间。

原文出自https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649092891&idx=1&sn=02600d96945fae3a4342737b5d69e315&chksm=be5bd4b6892c5da0605d9736bbec07bab0fa2153c9848d911a8171006abc139f106d9ea4d451&mpshare=1&scene=1&srcid=1213Jnpn25AZRE1dVbcSCBUn&sharer_sharetime=1576247301452&sharer_shareid=17b7729bcb860dcade22b324b00552f0&key=ddc85362f45c125ddfc6db74f9eaea96948a72ceea5b78e066146557c6ecdea352fc6f2bd292cda46ee6c7e7bcae73197f204452476ff0aacf788a0f1f232c54ca958c46b9f59efb21f184e7d8216ef2&ascene=1&uin=MTU5MDQyODczNQ%3D%3D&devicetype=Windows+10&version=62070158&lang=zh_CN&exportkey=AwojcGNqTu65HVysXvUHhw4%3D&pass_ticket=QXK%2Fg%2BgdqL0r08FU6j71wTnZCq9AwueR4%2B%2F8pe0sbI6f5ELcrvnFR2F4%2FjaRtNo4