BFC란 무엇인가요? 무슨 소용이 있나요?

BFC

(권장 튜토리얼: css 빠른 시작)

블록 서식 컨텍스트는 페이지의 CSS 시각적 렌더링의 일부입니다. 블록박스의 레이아웃과 플로트의 상호작용을 결정하는데 사용되는 영역입니다.

내 이해:

BFC는 환경입니다. 즉, 다른 BFC의 요소는 서로 간섭하지 않습니다.

기능:

1. 여백 접힘 방지

두 개의 연결된 블록 수준 요소의 세로 여백이 겹치는 현상이 발생한다고 생각하는데, 이는 단락 레이아웃 고려 사항 때문일 수도 있습니다. 줄 간격을 일정하게 유지하려면 이 기능을 사용하세요. 먼저 예제를 살펴보겠습니다.

*{margin: 0px;padding: 0px}
p {
    color: red;
    background: #eee;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border: solid 1px red;
}

위에서 볼 수 있듯이 두 p 요소에 모두 여백을 설정했지만 중간 공간이 축소되었습니다. 그런 다음 BFC의 예를 들어보겠습니다.

.ele{
    overflow: hidden;
    border: solid 1px red;
}

위에서 볼 수 있듯이 각 div 요소에 대해 오버플로 값을 숨김으로 설정하여 여백이 서로 겹치지 않기 때문에 블록 수준 서식 컨텍스트를 생성합니다.

2. BFC는 플로팅 요소를 포함할 수 있습니다

*{margin: 0px;padding: 0px}
.floatL{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}
.box{
    border: 1px solid red;
    width: 300px;
    margin: 100px;
    padding: 20px;
}
.BFC{
    overflow: hidden;
    *zoom: 1;
}

블록 수준 요소에 플로팅 요소가 포함되어 있으면 붕괴가 심하지만 BFC로 변환한 후에는 실행 결과를 보면 알 수 있습니다. BFC는 높이를 계산할 때 부동 요소를 자동으로 고려합니다.

3. BFC는 요소가 플로팅 요소로 덮이는 것을 방지할 수 있습니다

*{margin: 0px; padding: 0px}

.box1{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(0, 0, 255, 0.5);
    border: 1px solid #000;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid #000;
    /* overflow: hidden; */
    /* *zoom: 1; */
}

위에서 볼 수 있듯이 요소가 플로팅되면 후속 블록 수준 요소와 겹칩니다. 따라서 이 문제를 해결하려면 다음 요소에 대한 BFC를 생성하면 됩니다. box2에 오버플로 속성을 추가합니다.

overflow: hidden;
*zoom: 1;

이것은 부동 요소가 겹치는 문제를 방지합니다.

위 내용은 BFC란 무엇인가요? 무슨 소용이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!