CSS의 블록 수준 서식 정보

1.BFC 정의

BFC(블록 서식 컨텍스트)는 문자 그대로 "블록 수준 서식 컨텍스트"로 번역됩니다. 블록 수준 상자(블록 수준 요소)만 참여하는 독립적인 렌더링 영역입니다. 내부 블록 수준 상자가 배치되는 방식을 규정하며 이 영역 외부와는 아무런 관련이 없습니다. : 생성됨 BFC의 요소는 독립적인 상자입니다. 내부의 하위 요소는 외부 요소의 레이아웃에 영향을 미치지 않습니다. 그러나 내부의 레이아웃은 외부에 영향을 미치지 않습니다. BFC는 여전히 문서 2의 일반 흐름에 속합니다. BFC 생성:

BFC가 BFC를 트리거하는 방법을 이해하세요
다음 조건 중 하나가 충족되면 BFC가 트리거되어 BFC로 변환될 수 있습니다.

루트 요소

float 속성이 없음이 아닙니다

위치

정적 및 상대가 아닙니다

overflow 표시되지 않음

디스플레이는 inline-block, table-cell, table-caption, flex, inline-flex

BFC는 어디에나 있지만 사용할 때는 알지 못합니다

3. BFC 레이아웃 규칙:

BFC로 변환한 후의 특징은 다음과 같습니다.

내부 Box는 수직 방향으로 차례대로 배치됩니다.

상자의 수직 거리는 여백에 따라 결정됩니다. 동일한 BFC에 속하는 두 인접한 상자의 여백은 각 요소의 여백 상자 왼쪽이 포함하는 블록 테두리 상자의 왼쪽에 닿습니다(왼쪽에서 오른쪽으로 형식화하는 경우, 그렇지 않으면 반대임). 이는 float가 있는 경우에도 마찬가지입니다.

BFC 영역은 플로트 박스와 겹치지 않습니다.

BFC는 페이지에서 분리된 독립 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않습니다. 그리고 그 반대도 마찬가지입니다.

BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다.

4. BFC 기능:

사용 시 바비로 이동

1. 동일한 하위 요소에 의한

겹침 여백

bfc 방지 bfc 마진 겹침 (박스의 수직 방향의 거리는 마진에 의해 결정됩니다. 동일한 BFC에 속한 인접한 두 Box의 마진은 겹칠 것입니다.)

문제: 그림에서 볼 수 있듯이 20px만 있습니다. 논리적으로 말하면 String1과 String2 사이의 여백은 40px이어야 하지만 이로 인해 bfc에서 여백이 겹칩니다.

Code:

<style>.container1{
        /* 通过overflow：hidden可以创建bfc */
        overflow: hidden;
        background-color: red;
        width: 300px;
    }
    .sub1{
        margin: 20px 0px;
        background-color: #dea;
    }</style><div class="container1">
        <div class="sub1">String1</div>
        <div class="sub1">String2</div></div>

해결책: div 외부에 컨테이너를 래핑하고 컨테이너를 트리거할 수 있습니다. BFC를 생성합니다. 그러면 두 div는 동일한 BFC에 속하지 않으며 마진 겹침이 발생하지 않습니다.

코드:

<style>
    .newbfc{
            overflow: hidden;
    }</style><div class="container1">
        <div class="sub1">String1</div>
        <div class="newbfc"><div class="sub1">String2</div></div></div>

2.

Clear float

:

문제: 요소의 하위 요소가 모두 플로팅되면 높이 붕괴 현상이 발생합니다. 즉, 상위 컨테이너의 높이가 늘어나지 마세요

코드:

<style>
    .pre2{
        width: 200px;
        border: 2px solid red;
    }
    .float1,.float2{
        width: 100px;
        height: 100px;
        float: left;
    }
    .float1{
        background-color: #dee;
    }
    .float2{
        background-color: #dcc;
    }</style><div class="pre2">
        <div class="float1"></div>
        <div class="float2"></div></div>

해결책:

bfc의 규칙: BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여하므로 상위 컨테이너가 bfc로 설정되어 있는 한 하위 요소는 포함될 수 있습니다:
이 컨테이너에는 부동 하위 요소가 포함되고 높이는 하위 요소를 포함하도록 확장되며 이 BFC에서는 이러한 요소가 페이지의 일반 문서 흐름으로 돌아갑니다.

.pre2{
        width: 200px;
        border: 2px solid red;
        /* 设置overflow*/
        overflow:hidden;
    }

3. 레이아웃 해결 방법: 텍스트 줄 바꿈 방지

코드:

<style>.container2{
        overflow: hidden;
        width: 200px;
    }
    .box{
        float: left;
        width: 100px;
        height: 30px;
        background-color: #daa;
    }</style><div class="container2">
        <div class="box"></div>
        <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd  fsdsdfsdf fffffff</p></div>

이 p 요소는 이동하지 않지만 부동 요소 아래에 나타납니다. p 요소의 줄 상자(텍스트 줄 참조)가 이동됩니다. 여기서 라인 상자의 수평 축소는 부동 요소를 위한 공간을 제공합니다.

BFC 규칙: 각 요소의 여백 상자 왼쪽은 포함하는 블록 테두리 상자의 왼쪽에 닿습니다(왼쪽에서 오른쪽으로 서식 지정하는 경우, 그렇지 않으면 반대). 이는 float가 있는 경우에도 마찬가지입니다.

이 문제를 해결하려면 p 요소에 Overflow:hidden을 추가하여 새로운 bfc로 만드세요.

이 사례를 읽으신 후 방법을 익히셨다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사에 주목하세요. PHP 중국어 웹사이트!

관련 읽기:

HTML에서 프레임과 창을 나누는 데 일반적으로 사용되는 속성은 무엇입니까?

HTML에서 CSS를 참조하는 방법은 무엇입니까?

위 내용은 CSS의 블록 수준 서식 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!