집 > 기사 > 웹 프론트엔드 > CSS는 블록 수준 서식 컨텍스트 BFC를 이해합니다.

CSS는 블록 수준 서식 컨텍스트 BFC를 이해합니다.

小云云원래의: 2018-02-24 09:50:561753검색

1.BFC 정의

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

BFC를 트리거하는 방법을 알고 있습니다

다음 조건 중 하나가 충족되면 BFC를 트리거하고 BFC로 변환할 수 있습니다

Root 요소

됩니다. BFC는 어디에나 있다는 것을 발견하세요, 단지 당신 자신이 그것을 사용할 때 나는 그것을 모릅니다

3. BFC 레이아웃 규칙:

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

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

4. BFC 기능:

문제: As you 그림에서 볼 수 있듯이 20px의 여백은 논리적으로 40px이어야 하지만 이로 인해 bfc에서 여백이 겹칩니다

Code:

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

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

코드:

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

2. 플로트 지우기:

문제: 요소의 하위 요소가 모두 부동되면 높이 붕괴 현상이 발생합니다. 상위 컨테이너는 늘어나지 않습니다

코드:

<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>
<p class="pre2">
        <p class="float1"></p>
        <p class="float2"></p>
</p>

해결책:

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>
<p class="container2">
        <p class="box"></p>
        <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd  fsdsdfsdf fffffff</p>
</p>

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

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

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

CSS는 블록 수준 서식 컨텍스트 BFC를 이해합니다.

관련 기사