[css] CSS Block Formatting Context는 어떻게 작동합니까?

블록 형식화 컨텍스트

부동 소수점, 절대 위치 요소, 블록 상자가 아닌 블록 컨테이너 (예 : 인라인 블록, 테이블 셀 및 테이블 캡션) 및 ‘표시’가 아닌 ‘오버플로’가있는 블록 상자 (해당 값이 전파 된 경우 제외) 뷰포트에) 새로운 블록의 서식 상황을 설정 그 내용에 대해.

내 대담하게 중요한 건 확립 비트

이것이 의미하는 바는 사용하는 요소 overflow(보이는 것 이외의 것) float또는 inline-block.. 등이 자식 요소의 레이아웃을 담당하게된다는 것입니다. 그런 다음 “포함”되는 자식 요소가 플로트이든 접는 여백이든 경계 부모에 완전히 포함되어야합니다.

블록 서식 컨텍스트에서 각 상자의 왼쪽 바깥 쪽 가장자리는 포함하는 블록의 왼쪽 가장자리에 닿습니다 (오른쪽에서 왼쪽 서식의 경우 오른쪽 가장자리에 닿음)

위 줄의 의미 :

상자는 직사각형 일 수 있고 불규칙한 모양이 아니기 때문에 이는 두 개의 부동 소수점 사이 (또는 심지어 하나 옆에있는) 사이의 새로운 블록 서식 컨텍스트가 인접한 측면 부동 주위를 감싸지 않음을 의미합니다. 안쪽의 자식 상자는 부모 왼쪽 (또는 RTL의 오른쪽) 가장자리에 닿을 때까지만 확장 할 수 있습니다. 이 동작은 열 스타일 레이아웃에 유용합니다. 그러나 그것의 주된 용도는 “main content”div에서와 같이 float를 중지하는 것입니다. 실제로 float 된 사이드 열, 즉 소스 코드에서 더 일찍 나타나는 float를 지 웁니다.

플로트 클리어런스

정상적인 상황에서 float는 이전에 플로팅 된 모든 요소를 ​​지워야합니다. 이전에는 표시된 “열”뿐만 아니라 전체 소스 코드에서 플로팅 된 “플로트 클리어런스 사양”의 인용문은 다음과 같습니다.

이 속성은 이전 부동 상자에 인접하지 않을 수있는 요소 상자의 측면을 나타냅니다. ‘clear’속성은 요소 자체 또는 다른 블록 형식 컨텍스트 내의 부동 소수점을 고려하지 않습니다.

따라서 왼쪽 및 오른쪽 열이 각각 왼쪽과 오른쪽으로 플로팅되는 세 열 레이아웃이 있다고 가정하면 측면 열은 이제 플로팅되기 때문에 새로운 블록 서식 컨텍스트에 있습니다 (float는 새 BFC를 설정하는 속성 중 하나이기도합니다 ), 그래서 당신은 기꺼이 그 안에있는 목록 요소들을 플로팅 할 수 있고, 그들은 이미 소스 코드에서 이전에 더 이상 플로트를 신경 쓰지 않는 사이드 컬럼 안에있는 플로트 만 지 웁니다.

메인 콘텐츠를 새로운 블록 포맷 컨텍스트로 만들려면?

이제 중간 열을 양쪽에 여백을 두어 두 개의 측면 플로팅 열 사이에 깔끔하게 배치 된 것처럼 보이게하고 나머지 너비를 취할 수 있습니다. 중앙 열이 “유동”인 경우 원하는 너비를 얻는 일반적인 방법입니다. 콘텐츠 div 내에서 float / clearance를 사용해야 할 때까지 괜찮습니다 ( “clearfix”해킹 또는이를 포함하는 템플릿을 사용하는 사람들에게 흔히 발생 함).

이 매우 간단한 코드를 사용하십시오.

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated">this a floated box</div>
</div>

다음을 생성합니다.

일반적으로 이것은 당신이 (주요 내용)에 아무런 배경 색상이나 내부가 없다 특히, 괜찮 수레 – 통지 수레 잘 (아직 삭제되지 않음) 그들이 무슨 당신이 그들을 제외하고 아마 다하고 있습니다 하지만 그들은는 H3의 최고 여백과 p의 아래쪽 여백은 실제로 콘텐츠 div (밝은 회색 배경)에 포함되지 않습니다.

따라서 위 코드의 동일한 간단한 여백 시나리오에 다음을 추가하십시오.

.clear-r {clear: right;}

CSS에 추가하고 두 번째 HTML 플로팅 상자를 다음과 같이 변경합니다.

<div class="floated clear-r"> this a floated cleared box</div>

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

이번에는 다음을 얻습니다.

두 번째 플로트는 오른쪽을 지우고 있지만 오른쪽 열의 전체 높이를 지우고 있습니다. 오른쪽 열은 소스 코드의 앞부분에 플로팅되므로 말한대로 지워집니다! 하지만 원하는 효과가 아닐 수도 있지만 h3및 p여백이 여전히 축소되어 있습니다 (포함되지 않음).

아이들을 위해 블록 형식화 컨텍스트를 설정하십시오!

마지막으로 메인 콘텐츠 열이 책임을지게합니다- 블록 포맷팅 컨텍스트가됩니다 -콘텐츠에 대해 : margin: 0 200px;메인 콘텐츠 CSS 및 ADD 에서 제거 overflow: hidden;하면 다음을 얻을 수 있습니다.

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  overflow: hidden;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

이것은 아마도 당신이 예상하는 것과 훨씬 더 비슷할 것입니다. 이제 float가 포함되어 있고 오른쪽 열을 제대로 무시하고 지워 h3지며 및 p여백이 축소되는 대신 포함됩니다.

최근 재설정을 광범위하게 사용함에 따라 여백이 눈에 띄지 않게되지만 (IE는 여전히 옳지 않습니다) 중앙 “주요 콘텐츠”에 방금 일어난 일은 그것이 블록 형식화 컨텍스트가되었고 이제 그에 대한 책임이 있다는 것입니다. 자신의 자식 (하위) 요소. 그것은 동일한 속성 사용, 실제로 hasLayout의 마이크로 소프트의 초기의 개념과 매우 유사 display: inline-block, float그리고 overflow눈에 보이는 이외의, 그리고 물론 테이블 세포는 항상 레이아웃이의 ..이 버그없이 그러나입니다)

도움이 되었기를 바랍니다. 질문이 있으시면 언제든지 문의하십시오!

업데이트 : 문제의 추가 정보 :

“그러나 사용자 에이전트가 상자를 그릴 때 플로팅 요소는 무시되고 콘텐츠를 채울 때이를 고려합니다.”

예 수레는 일반적으로 컨테이너 상자를 오버레이합니다. 그게 부모 경계에 대한 의미입니까? 블록 요소가 그려지고 부동 소수점을 포함하는 경우 블록 부모 자체는 부동 소수점 아래에 사각형으로 그려지며 공간을 확보하기 위해 단축되는 다른 하위 요소의 “인라인 익명 상자”또는 단순히 “라인 상자”입니다. 플로트

이 코드를 사용하십시오.

#content {
  background: #eee;
  color #000;
  border: 3px solid #444;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;
}
p {
  background: #444;
  color: #fff;
}

<div id="content">
  <div class="float">floated box</div>
  <h3>This is a content box</h3>
  <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>

다음을 생성합니다.

부모 요소가 실제로 float를 포함하지 않는다는 것을 알 수 있습니다. 완전히 래핑하지 않기 때문입니다. float는 단순히 콘텐츠 위에 떠 있습니다. div에 콘텐츠를 계속 추가하면 결국 래핑됩니다. p요소 의 (익명) “라인 상자”가 더 이상 자신을 단축 할 필요가 없기 때문입니다 .

단락 요소에 색상을 지정하여 실제로 플로트 아래로 들어가는 것을 볼 수 있습니다. 진한 회색 배경은 단락이 시작되는 곳이고 흰색 텍스트는 “익명 줄 상자”가 시작되는 곳입니다. “플로트의 경우, 달리 말하지 않는 한 (예 : 컨텍스트 변경)

위의 그림을 다시 참조하면 p요소 의 왼쪽에 여백을두면 “라인 상자”(흰색 텍스트)가 왼쪽 가장자리에만 닿기 때문에 플로트 하단 아래의 텍스트 줄 바꿈이 중지됩니다. 컨테이너의 색상이 지정된 배경을 p오른쪽으로 가져와 플로트를 제거하지만 p의 서식 컨텍스트 의 동작을 변경하지는 않습니다 . 위의 첫 번째 그림의 중앙 열처럼;)