CSS에서 BFC와 IFC의 활용 사례 분석
- 小云云원래의
- 2018-02-02 10:44:381768검색
예전에 누군가 CSS에서 BFC에 대해 언급한 것을 들은 적이 있습니다. IFE 실습 중에 마진 붕괴 문제가 발생하여 우연히 BFC의 메커니즘을 알아냈습니다. (참고자료는 글 말미의 참고자료를 참고하세요)
이 글은 CSS에서 BFC와 IFC의 활용에 대한 관련 정보를 주로 소개하고 있는데, 에디터가 꽤 좋다고 생각해서 지금부터 공유하겠습니다. 그리고 참고용으로 주세요. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
1 What is BFC
이전의 모든 블로그 게시물과 마찬가지로 What의 관점에서 소개부터 시작하여 BFC를 얕은 것부터 깊은 것까지 이해해 보겠습니다.
소위 서식 지정 컨텍스트는 W3C CSS2.1 사양의 개념입니다.
페이지의 렌더링 영역이며 일련의 렌더링 규칙이 있습니다.
하위 요소의 위치는 물론 다른 요소와의 관계 및 상호 작용도 결정합니다.
블록 형식 지정 컨텍스트(BFC, 블록 수준 형식 지정 컨텍스트)는 블록 수준 요소의 렌더링 및 표시 규칙입니다. 일반인의 관점에서 BFC는 컨테이너 내부의 하위 요소가 외부 요소에 영향을 주지 않는 커다란 닫힌 상자로 이해될 수 있으며 그 반대의 경우도 마찬가지입니다.
BFC의 레이아웃 규칙은 다음과 같습니다.
1 내부 상자는 수직 방향으로 하나씩 배치됩니다.
2 BFC는 페이지에서 격리된 독립 컨테이너입니다.
3 동일한 BFC에 속하는 두 개의 인접한 상자입니다. 위쪽 및 아래쪽 여백은 겹칩니다.
4 BFC의 높이를 계산할 때 부동 요소도 계산에 참여합니다.
5 부동 요소가 있더라도 각 요소의 왼쪽은 포함된 상자의 왼쪽과 접촉합니다.
6 BFC의 영역은 float와 겹치지 않습니다.
그럼 BFC를 트리거하는 방법은 무엇일까요? BFC 기능은 요소가 다음 조건 중 하나를 충족하는 한 트리거될 수 있습니다.
플로팅 요소: 없음이 아닌 부동 속성 값
절대 위치 요소: 위치 (절대, 고정)
디스플레이는 inline-block, table-cells, flex
표시 이외의 오버플로 값(숨김, 자동, 스크롤)
두 번째 BFC 특성 및 응용
다음으로, 본편에서 그 이유를 설명할 때 일반적인 BFC 기능과 활용 방법을 소개하겠습니다. 위의 레이아웃 규칙과 트리거 조건이 사용되므로 주의가 필요합니다.
<head>
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
</head>
<body>
<p class="p"></p>
<p class="p"></p>
</body>
<p class="p"></p> <p class="wrap"> <p class="p"></p> </p>렌더링은 다음과 같습니다.
2 BFC는 플로팅 요소(클리어 플로트)를 포함할 수 있습니다. 
.wrap {
overflow:hidden;
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;외부 p는 내부 요소를 포함할 수 없습니다. 부동 p, 효과는 아래 그림에 표시됩니다.
그러나 BFC 사양의 4조에 따라 외부 컨테이너의 BFC를 트리거하면 BFC 높이를 계산할 때 부동 요소도 참여합니다. 계산에서 외부 p 컨테이너는 부동 요소를 래핑할 수 있으므로 다음과 같이 코드를 수정하면 됩니다.
<p style="border: 1px solid #000;">
<p style="width: 50px; height: 50px; background: #eee;
float: left;">
</p>
</p>
다음 효과를 얻으려면:
3 BFC는 요소가 부동 요소로 덮이는 것을 방지할 수 있습니다
먼저 예를 살펴보겠습니다.
<p style="border: 1px solid #000;overflow: hidden"> <p style="width: 100px;height: 100px;background: #eee;float: left;"></p> </p>
효과 다이어그램은 다음과 같습니다.
그 이유는 위의 규칙 5 때문입니다. 각 요소의 왼쪽은 포함 상자의 왼쪽과 접촉합니다. 플로팅이 있는 경우
그래서 효과를 보완하고 간섭하도록 변경하려면 규칙 6을 사용해야 합니다. BFC의 영역은 플로트와 겹치지 않으므로
는 BFC의 속성, 즉
<p class="aside"></p>
<p class="main"></p>
p {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
}
을 트리거할 수도 있습니다. 이러한 방식으로 두 열 레이아웃의 적응을 실현하는 데 사용할 수 있습니다. 
3 라인 상자의 너비는 포함 블록에 의해 결정되고 기존 부동소수점은 라인 높이에 따라 결정됩니다.
관련 추천:
CSS에서 중요한 BFC에 대한 자세한 설명
BFC 및 높이 붕괴 문제에 대해
위 내용은 CSS에서 BFC와 IFC의 활용 사례 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!