프론트 엔드 인터뷰: BFC에 대해 질문을 받았을 때 전체 점수를 받으려면 이렇게 대답해야 합니다.

팁: 프론트 엔드 인터뷰를 위한 빈도가 높은 테스트 사이트인 BFC는 종종 BFC가 무엇인지 묻는 질문을 받습니다. BFC의 역할? BFC를 실행하는 방법? 이러한 질문. 하지만, 지원자들의 답변이 불만족스럽거나 불분명하거나 불완전한 경우가 많습니다.

---

BFC

1. 이해하다

공식 설명: BFC(블록 형식 지정 컨텍스트)는 문자 그대로 "블록 형식 지정 컨텍스트"로 번역되며, 이는 내부가 배치되는 방식을 지정하는 별도의 렌더링 영역이며 이 영역의 하위 요소가 외부 요소에 영향을 미치지 않습니다.
직설적으로 말하자면 BFC는 안전한 영역과 같으며 이 영역의 모든 요소(플로팅, 위치 지정 등 포함)의 레이아웃은 외부의 다른 요소 레이아웃에 영향을 미치지 않습니다.

2. 기능

1. 清除浮动
2. 处理外边距合并问题(又叫外边距塌陷)
3. 使浮动元素不遮挡普通元素

3. 시나리오 시연

3.1 플로트 지우기

위의 구직 기능 모듈을 디자인하고 싶다면 전체 구직 모듈을 디자인할 때 나중에 얼마나 많은 하위 모듈을 추가해야 하는지 알지 못하기 때문에 不会给外层容器添加高度하위 모듈이 자동으로 전체 컨테이너를 여는 경우가 많습니다. .

다음으로 모든 하위 모듈을 왼쪽으로 정렬해야 하므로 float(float:left)가 다음과 같이 설정되는 경우가 많습니다.
css

<style>      
	div {
     
     
		/*只给容器设置了宽度*/
		width: 300px;
		padding: 10px;
		background-color: #fae8c8;
	}
	span {
     
     
		/*给子模块添加浮动*/
		float: left;
		padding-bottom: 30px;
		width: 25%; 
	}
</style>

HTML

<div>
    <h2><a class='title1'>求职简历</a></h2>
    <span><a href="#">销售</a></span>
    <span><a href="#">导购</a></span>
    <span><a href="#">厨师</a></span>
    <span><a href="#">房产经纪</a></span>
    <span><a href="#">文员</a></span>
    <span><a href="#">收银</a></span>
    <span><a href="#">配菜</a></span>
    <span><a href="#">保险经纪</a></span>
    <span><a href="#">前台</a></span>
    <span><a href="#">营业员</a></span>
    <span><a href="#">服务员</a></span>
    <span><a href="#">人事</a></span>
    <span><a href="#">客服</a></span>
    <span><a href="#">保安</a></span>
    <span><a href="#">洗碗工</a></span>
    <span><a href="#">平面设计</a></span>
    <span><a href="#">会计</a></span>
    <span><a href="#">电工</a></span>
    <span><a href="#">迎宾</a></span>
    <span><a href="#">仓车管理</a></span>
</div>

결과는 실제로 동일 합니다.

span 태그(하위 모듈)의 부동으로 인해 문서 흐름에서 분리되므로 상위 컨테이너가 높이를 늘리는 데 더 이상 도움이 되지 않으며, 이는 일반적인 "플로팅 축소"로 이어집니다. 현상 이 현상을 해결하려면 float를 지워야 합니다. 여기에서 BFC를 사용할 수 있습니다 . BFC
를 트리거하는 데는 여러 가지 조건이 있습니다. 여기서는 상위 요소에 overflow(hidden)를 추가하는 것을 예로 들어 보겠습니다
. BFC 조건을 유발하는 일반적인 방법을 요약하겠습니다)

div {
    
    
	/*我们只需要在原基础上，向父元素添加overflow：hidden属性即可*/
	overflow: hidden;
	width: 300px;
	padding: 10px;
	background-color: #fae8c8;
}

효과

가 표시됩니다. overflow: hidden 속성을 상위 컨테이너로 설정하여 BFC 기능을 트리거하면 상위 컨테이너가 특별한 " BFC 컨테이너 "가 됩니다. 실제로 BFC의 주요 기능이
여기 에 나와 있습니다. 즉, BFC의 높이를 계산할 때 부동 요소도 계산에 참여합니다 . 이것이 BFC가 플로팅의 부정적인 영향을 제거할 수 있는 이유입니다!

3.2 마진 병합/붕괴 처리

두 개의 요소가 있다고 가정

하면 파란색 모듈 下外边距과 빨간색 모듈 上外边距을 각각 설정하고 두 개의 외부 여백이 각각 20px로 설정되어 있다고 가정하면 두 모듈 사이의 거리 = 20px + 20px, 즉 40px 거리라고 쉽게 생각할 수 있습니다. 그들 사이에.

코드 실습은 다음과 같습니다.
css

<style>
    .blue {
     
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
        /*添加下外边距*/ 
        margin-bottom: 20px;   
    }
    .red {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
        /*添加上外边距*/ 
        margin-top: 20px;       
    }
</style>

HTML

<div class="blue"></div>
<div class="red"></div>

결과는 이상적이지 않았습니다.

예, 두 여백이 함께 병합되었으므로 이름이 "margin merge" 입니다. (양변 사이의 거리가 같지 않을 경우 가장 큰 바깥쪽 여백을 두 변 사이의 거리로 선택하십시오.) 여백 병합 문제를 해결하기 위해 BFC 속성 css 를 사용하여 상자에 두 요소를 래핑할 수 있습니다 .

<style>
    .BFC_container {
     
     
    	/*设置overflow触发BFC*/
        overflow: hidden;
    }
    .blue {
     
     
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-bottom: 20px; 
    }
    .red {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 20px; 
    }
</style>

HTML

/*分别将两个元素包裹在一个附带BFC属性的容器中*/
<div class="BFC_container">
    <div class="blue"></div>
</div>

<div class="BFC_container">
    <div class="red"></div>
</div>

효과

따라서 BFC의 두 번째 역할은 요소의 바깥쪽 여백이 무너지는 것을 처리하는 것입니다.

3.3 부동 요소가 더 이상 일반 요소를 덮지 않습니다.

우리 모두는 부동 요소가 문서의 흐름에서 벗어나 다음과 같이 다른 일반 요소를 가리는 부정적인 상황을 유발할 수 있음을

알고 있습니다. 주황색 ​​부동 요소가 녹색 일반 요소를 가리는 것을 볼 수 있습니다. 평면이 정렬되고 더 이상 서로 영향을 미치지 않도록 하면 일반 요소에 BFC 속성을 추가하여 완료할 수 있습니다.
css

<style>
    .float_div {
     
     
        float: left;
        width: 100px;
        height: 100px;      
        background-color: tomato;
    }
    .common_div {
     
     
    	/*给普通元素添加BFC属性*/
        overflow: hidden;
        width: 200px;
        height: 200px;
        background-color: springgreen;
    }
</style>

HTML

<div class="float_div">浮动元素</div>
<div class="common_div">普通元素</div>

효과:

BFC 속성을 공통 요소로 설정하면 두 요소가 서로 달라붙지 않고 서로 영향을 미치는 것을 볼 수 있습니다.

3. BFC를 유발하는 일반적인 조건

1. 오버플로 속성이 不为표시됩니다(예: 숨김, 스크롤).
2. float 속성이 不为없음(예: 왼쪽, 오른쪽)
3. 위치 只有가 절대적이거나 고정됨

위의 세 가지는 BFC를 트리거하는 데 가장 일반적으로 사용되는 조건이며 가장 권장되는 트리거 방법은 overflow: hidden 입니다.

• 스크롤을 설정하면 테두리 오른쪽에 드래그 바가 추가되기 때문입니다.
• float 속성을 사용하여 BFC를 트리거하면 이 모듈이 float를 생성하고 문서 흐름을 벗어나기 때문에 다른 모듈 레이아웃이 발생할 수 있습니다.
• position 속성을 설정하면 다른 모듈의 레이아웃에 영향을 줄 수도 있습니다.

따라서 가장 권장되는 방법은 overflow:hidden을 사용하여 BFC 속성을 트리거하여 문제를 해결하는 데 드는 비용을 최소화하는 것입니다!