BFC란 무엇인가요? BFC에 대한 간단한 이해-HTML 튜토리얼-php.cn

3 4 5 BFC</ 제목 > 6 <style type="text/css">"/><meta property="og:local" content="ko"> <meta property="og:title" content="BFC란 무엇인가요? BFC에 대한 간단한 이해-HTML 튜토리얼-php.cn"> <meta property="og:description" content="소개 BFC에 대해 이야기하기 전에 예제를 살펴보겠습니다. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</ 제목 > 6 <style type="text/css">"> <meta property="og:url" content="https://m.php.cn/ko/faq/371936.html"> <meta property="og:image" content="https://img.php.cn/upload/article/000/000/001/9f26e0a5c4b8c723497c1cd890d713af.png"> <meta property="og:site_name" content="php.cn"> <meta property="og:type" content="website"> <link rel="canonical" href="https://m.php.cn/ko/faq/371936.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/371936.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/371936.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/371936.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/371936.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/371936.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/371936.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/371936.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/371936.html" /> <meta charset="utf-8" /><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><meta name="applicable-device" content="mobile" /><link rel="stylesheet" href="/static/css/style.css?4.5.31"><link href="/static/front/mobcss/newphpcommon.css?1.1" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/swiper.min.css" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/newphp.css?1.2" type="text/css" rel="stylesheet"/><link href="/static/css/global.css" type="text/css" rel="stylesheet"/><link href="/static/layui/css/layui.css" type="text/css" rel="stylesheet"/><link href="/static/mobcss/mobindex3.css" type="text/css" rel="stylesheet"/><script src="/static/front/mobjs/jquery-1.6.1.min.js"></script><script src="/static/front/mobjs/swiper.min.js"></script><script src="/static/front/mobjs/newphpcommon.js"></script><script> var canshu = { SeeMore:'더보기', FoldUp:'접', Choice:'언어', wait:'불러오는 중입니다. 기다려 주세요~', LoginFirst:"먼저 로그인을 해주세요", needKeyword:'키워드 검색을 입력하세요', emailPhoneError:'정확한 전화번호나 이메일 주소를 입력해주세요', missPwd:'비밀번호를 입력해주세요', emailError:'올바른 이메일 주소를 입력해주세요', VerCode:"인증 코드를 입력 해주세요", getCode:'배상', pwdError:'잘못된 비밀번호 형식', TwoPassNotMatch:'두 개의 비밀번호가 일치하지 않습니다', Bindemail:'이메일 바인딩', resetpassword:'암호를 재설정', ConfirmPass:'비밀번호 확인', pwdCheck:'6~18자의 문자 또는 숫자를 입력하세요.', Editinfor: '개인정보 수정', trimContent:'내용을 입력해주세요', titleCheck:'제목은 5단어 이상이어야 합니다.', choiceLang:'언어 분류를 선택하세요.', Secondreply:'회신하다', NetWorkError:'네트워크 오류가 발생했습니다. 나중에 다시 시도해 주세요.', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de' }; </script><script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WWVXRJPW'); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-H42EVCYBJC"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-H42EVCYBJC'); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5902227090019525" crossorigin="anonymous"></script><meta property="article:author" content="零下一度" /><meta property="article:published_first" content=",https://www.php.cn/faq/371936.html" /><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css?1"><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault1.css"><link href="/static/mobcss/newphp.css" type="text/css" rel="stylesheet"/><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script> var xnb_name = 'Virtual currency'; </script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","headline":"BFC란 무엇인가요? BFC에 대한 간단한 이해","description":"소개 BFC에 대해 이야기하기 전에 예제를 살펴보겠습니다. 1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4 <meta charset=\"UTF-8\"> 5 <title>BFC<\/ 제목 > 6 <style type=\"text\/css\">","image":["https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/2d1003f9268b615fd697955bc6efef30-0.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-1.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-2.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-3.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-4.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-5.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-6.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-7.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-8.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-9.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-10.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/ec094113ae178c5a44a9f00011b32c5d-11.png","https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/ec094113ae178c5a44a9f00011b32c5d-12.png"],"datePublished":"2017-07-02T09:38:13+8:00","author":{"url":"http:\/\/m.php.cn\/ko\/member\/1506.html","name":"零下一度"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/ko\/faq\/371936.html"},"url":"https:\/\/m.php.cn\/ko\/faq\/371936.html","articleBody":"<h3>소개<\/h3>\n<p>BFC에 대해 이야기하기 전에 예제를 살펴보겠습니다<\/p>\n<div class=\"cnblogs_code\"><pre> 1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4 \r\n <meta charset=\"UTF-8\"> 5 <title>BFC<\/title> 6 \r\n <style type=\"text\/css\"> 7 \r\n .div1 {background-color: #FCE38A; width: 200px; height: 100px;} 8 \r\n .div2 {background-color: #EAFFD0; width: 200px; height: 100px;} 9 \r\n .div3 {background-color: #95E1D3; width: 200px; height: 100px;}10 \r\n <\/style>11 <\/head>12 13 <body>14 <div class=\"div1\">div1<\/div>15 \r\n <div class=\"div2\">div2<\/div>16 <div class=\"div3\">div3<\/div>17 <\/body>18 \r\n <\/html><\/pre><\/div>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/2d1003f9268b615fd697955bc6efef30-0.png\" alt=\"\"><\/p>\n<p>행의 너비가 가능하더라도 블록 수준 요소의 순서는 위에서 아래로임을 알 수 있습니다. 여러 요소를 수용하려면 이제 div1과 div2에 동시에 여백을 추가하세요<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-1.png\" alt=\"\"><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-2.png\" alt=\"\"><\/p>\n<p>원래 div1의 아래쪽 여백은 50px이고 div2의 위쪽 여백은 논리적으로 50px입니다. 100px인데 여기서는 50px에 불과합니다. 이는 블록 수준 레이아웃 컨텍스트에서 인접한 두 블록 수준 상자 사이의 수직 여백이 축소되었기 때문입니다. 이는 <span style=\"color: #0000ff;\"><span style=\"color: #0000ff;\">CSS Study Notes 07 Box Model<\/span><\/span>에 소개된 여백 병합입니다. 이 마진 병합 현상을 해결하는 방법은 아래에서 소개할 BFC와 관련이 있습니다. <\/p>\n<h3>BFC란 무엇입니까<\/h3>\n<p><span style=\"color: #ff0000;\"><strong>블록 수준 서식 컨텍스트는 독립적인 렌더링 영역입니다<\/strong><\/span>. 이는 내부 블록 수준 상자(표시 속성은 다음과 같습니다)를 지정합니다. block, list-item, table 요소)이며 이 영역 외부와는 아무런 관련이 없습니다. 그 중 Formatting Context는 문서를 렌더링하는 방법을 결정하는 컨테이너입니다. 이는 W3C CSS2.1 사양의 개념입니다. 이는 페이지의 렌더링 영역이며 하위 요소의 위치 지정 방법, 다른 요소와의 관계 및 상호 작용을 결정하는 일련의 렌더링 규칙이 있습니다. 가장 일반적인 서식 지정 컨텍스트는 BFC(블록 서식 지정 컨텍스트)와 IFC(인라인 서식 지정 컨텍스트)입니다. CSS2.1에는 BFC와 IFC만 있고, CSS3에는 GFC와 FFC도 추가되어 있습니다. <\/p>\n<p><strong><span style=\"color: #ff0000;\">일반인의 관점에서 BFC는 독립된 상자이며, 이 독립된 상자의 레이아웃은 외부 요소에 영향을 받지 않습니다. <\/span><\/strong><\/p>\n<p> 문서 프레젠테이션이 시작되면 자동으로 BFC가 생성되어 전체 페이지가 레이아웃됩니다. 새로운 BFC가 생성되지 않으면 전체 문서는 이 BFC가 됩니다. <\/p>\n<h3>BFC 규칙<\/h3>\n<ul class=\" list-paddingleft-2\">\n<li><p>내부 상자는 위에서부터 수직 방향으로 차례로 배치됩니다(위 예에서 볼 수 있듯이)<\/p><\/li>\n<li><p>동일 BFC에서 인접한 두 블록 레벨에 요소에서는 수직 여백이 무너집니다<\/p><\/li>\n<li>\n<p>각 요소의 여백 상자 왼쪽은 포함하는 블록 테두리 상자의 왼쪽에 닿습니다(왼쪽에서 오른쪽으로 서식 지정하는 경우, 그렇지 않으면 반대). a float<\/p> <\/li>\n<li><p>BFC 영역은 float 상자와 겹치지 않습니다<\/p><\/li>\n<li><p>BFC는 페이지에서 격리된 독립 컨테이너이며, 그 반대의 경우도 마찬가지입니다. BFC 계산 높이 시 플로팅 요소도 계산에 참여<\/p><\/li>\n<li><p> 트리거 BFC<\/p><\/li>\n<\/ul>\n<h3>루트 요소<\/h3>\n<ul class=\" list-paddingleft-2\">\n<li><p>float 속성이 없음이 아닙니다(예: 왼쪽 | 오른쪽) <\/p><\/li>\n<li><p>오버플로 값이 표시되지 않습니다. (예: 숨김 | 자동 | 스크롤) <\/p><\/li>\n<li><p>표시 속성 값은 inline-block | flex | inline-flex | table-cell | table-caption<\/p><\/li>\n<li><p>위치는 절대 또는 고정입니다<\/p><\/li>\n<li><p> <\/p><\/li> 여백 오버레이 해결 문제<\/ul>\n<h3>는 여전히 위의 예입니다. 현재 페이지의 요소가 표준 흐름에 있으므로 규칙에 따라 본문 요소는 BFC입니다<\/h3>\n<h4><pre>同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠<\/pre><\/h4>. <p>이제 display:inline-block 속성을 div1로 설정합니다<\/p>\n<div class=\"cnblogs_code\"> <\/div>\n<p><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-3.png\" alt=\"\"><\/p>이때 div1 요소는 display:inline-block을 통해 BFC를 트리거하므로 이때 div1은 규칙에 따라 독립적인 BFC입니다. <p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-4.png\" alt=\"\"><\/p>\n<pre>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然<\/pre>\n<p>이므로 이때 마진이 겹치는 일은 없을 것입니다. <\/p>\n<div class=\"cnblogs_code\">내부 플로트 지우기<\/div>\n<p>표준 흐름에서 상자의 모든 하위 요소가 플로팅되고 상자에 높이가 설정되지 않으면 상자의 전체 높이가 축소됩니다. 아래 예를 참조하세요. <\/p>\n<pre> 1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4 <meta charset=\"UTF-8\"> 5 <title>BFC清除内部浮动<\/title> 6 <style type=\"text\/css\"> 7 .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;} 8 .parent {width: 300px; border: 1px solid #95E1D3;} 9 <\/style>10 <\/head>11 <body>12 <div class=\"parent\">13 <div class=\"child\"><\/div>14 <div class=\"child\"><\/div>15 <\/div>16 <\/body>17 <\/html><\/pre>\n<h4><\/h4>\n<p><\/p>\n<div class=\"cnblogs_code\">상위 컨테이너는 두 개의 하위 div에서 지원됩니다. 이제 하위에 float를 추가합니다<\/div>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-5.png\" alt=\"\"><\/p>\n<p><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-6.png\" alt=\"\">이 때 상위 컨테이너는 두 개의 겹치는 선이 됩니다. 0은 소위 높이 붕괴입니다. 규칙대로<\/p>\n<p><\/p>\n<pre>计算BFC的高度时，浮动元素也参与计算<\/pre>\n<img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-7.png\" alt=\"\"><p>这时候可以触发parent生成BFC，那么parent在计算高度时，parent内部的浮动元素child也会参与计算<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-8.png\" alt=\"\"><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-9.png\" alt=\"\"><\/p>\n<h4>布局<\/h4>\n<div class=\"cnblogs_code\"><pre> 1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4 <meta charset=\"UTF-8\"> 5 <title>BFC布局<\/title> 6 <style type=\"text\/css\"> 7 .left {width: 100px; height: 100px; background-color: #FCE38A; float: left;} 8 .right {width: 300px; height: 150px; background-color: #95E1D3;} 9 10 <\/style>11 <\/head>12 <body>13 <div class=\"left\"><\/div>14 <div class=\"right\"><\/div>15 <\/body>16 <\/html><\/pre><\/div>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-10.png\" alt=\"\"><\/p>\n<p>根据规则<\/p>\n<div class=\"cnblogs_code\"><pre>每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此<\/pre><\/div>\n<p>所以即使left设置了左浮动，right的的左边依然会与包含块的左边（即body）相接触。接着我们可以根据规则<\/p>\n<div class=\"cnblogs_code\"><pre>BFC的区域不会与float box重叠<\/pre><\/div>\n<p>让right触发产生BFC，这样right就不会与left重叠了<\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/ec094113ae178c5a44a9f00011b32c5d-11.png\" alt=\"\"><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/ec094113ae178c5a44a9f00011b32c5d-12.png\" alt=\"\"><\/p>\n<p>这样就形成了常见的两列布局。<\/p>\n<p><strong><span style=\"color: #ff0000;\">总之记住一点BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，同样的，外面的元素也不会影响到容器里面的子元素。<\/span><\/strong><\/p>"}</script></head><body><div class="bodyBg"><div class="nphpHead"><div class="nphpTop"><div class="nphpTopIn"><div class="nphpLogo"><a href="http://m.php.cn/ko/" title="PHP 중국어 웹사이트"></a></div><div class="nphpSubmit"><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><a href="http://m.php.cn/ko/login" class="bg3"></a></div></div></div><div class="nphpNav"><div class="nphpNavIn"><div class="swiper-container nphpNavSwiper"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/update/article_0_1.html" >최근 업데이트</a></div><div class="clear"></div></div></div><script> var swiper = new Swiper('.nphpNavSwiper', { slidesPerView : 'auto' }); </script></div></div></div><div class="bodyMain"><div class="nphpSize"><div class="nphpSizeIn"><b></b><p><a href="http://m.php.cn/ko/" title="집" class="bBlack">집</a> > <a href="http://m.php.cn/ko/article.html" title="기사" class="bBlack">기사</a> > <a href="http://m.php.cn/ko/web-designer.html" class="cBlack">웹 프론트엔드</a> > BFC란 무엇인가요? BFC에 대한 간단한 이해</p><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>BFC란 무엇인가요? BFC에 대한 간단한 이해</h1><div class="nphpQianTitleIn"><span><img data-src="https://img.php.cn/upload/avatar/000/001/506/5922afcbb3cf4752.jpg" alt="零下一度" class="lazyload" src="/static/front/mobimages/moren/moren.png" /></span><dl><dt><em>零下一度</em><i class='bg1'>원래의</i><div class="clear"></div></dt><dd><em>2017-07-02 09:38:13</em><i>12004검색</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><h3>소개</h3> <p>BFC에 대해 이야기하기 전에 예제를 살펴보겠습니다</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;} 8 .div2 {background-color: #EAFFD0; width: 200px; height: 100px;} 9 .div3 {background-color: #95E1D3; width: 200px; height: 100px;}10 </style>11 </head>12 13 <body>14 <div class="div1">div1</div>15 <div class="div2">div2</div>16 <div class="div3">div3</div>17 </body>18 </html></pre></div> <p><img src="https://img.php.cn/upload/article/000/000/001/2d1003f9268b615fd697955bc6efef30-0.png" alt=""></p> <p>행의 너비가 가능하더라도 블록 수준 요소의 순서는 위에서 아래로임을 알 수 있습니다. 여러 요소를 수용하려면 이제 div1과 div2에 동시에 여백을 추가하세요</p> <p><img src="https://img.php.cn/upload/article/000/000/001/8d322ce836c32aab0c6c9356bec2005a-1.png" alt=""></p> <p><img src="https://img.php.cn/upload/article/000/000/001/8d322ce836c32aab0c6c9356bec2005a-2.png" alt=""></p> <p>원래 div1의 아래쪽 여백은 50px이고 div2의 위쪽 여백은 논리적으로 50px입니다. 100px인데 여기서는 50px에 불과합니다. 이는 블록 수준 레이아웃 컨텍스트에서 인접한 두 블록 수준 상자 사이의 수직 여백이 축소되었기 때문입니다. 이는 <span style="color: #0000ff;"><span style="color: #0000ff;">CSS Study Notes 07 Box Model</span></span>에 소개된 여백 병합입니다. 이 마진 병합 현상을 해결하는 방법은 아래에서 소개할 BFC와 관련이 있습니다. </p> <h3>BFC란 무엇입니까</h3> <p><span style="color: #ff0000;"><strong>블록 수준 서식 컨텍스트는 독립적인 렌더링 영역입니다</strong></span>. 이는 내부 블록 수준 상자(표시 속성은 다음과 같습니다)를 지정합니다. block, list-item, table 요소)이며 이 영역 외부와는 아무런 관련이 없습니다. 그 중 Formatting Context는 문서를 렌더링하는 방법을 결정하는 컨테이너입니다. 이는 W3C CSS2.1 사양의 개념입니다. 이는 페이지의 렌더링 영역이며 하위 요소의 위치 지정 방법, 다른 요소와의 관계 및 상호 작용을 결정하는 일련의 렌더링 규칙이 있습니다. 가장 일반적인 서식 지정 컨텍스트는 BFC(블록 서식 지정 컨텍스트)와 IFC(인라인 서식 지정 컨텍스트)입니다. CSS2.1에는 BFC와 IFC만 있고, CSS3에는 GFC와 FFC도 추가되어 있습니다. </p> <p><strong><span style="color: #ff0000;">일반인의 관점에서 BFC는 독립된 상자이며, 이 독립된 상자의 레이아웃은 외부 요소에 영향을 받지 않습니다. </span></strong></p> <p> 문서 프레젠테이션이 시작되면 자동으로 BFC가 생성되어 전체 페이지가 레이아웃됩니다. 새로운 BFC가 생성되지 않으면 전체 문서는 이 BFC가 됩니다. </p> <h3>BFC 규칙</h3> <ul class=" list-paddingleft-2"> <li><p>내부 상자는 위에서부터 수직 방향으로 차례로 배치됩니다(위 예에서 볼 수 있듯이)</p></li> <li><p>동일 BFC에서 인접한 두 블록 레벨에 요소에서는 수직 여백이 무너집니다</p></li> <li> <p>각 요소의 여백 상자 왼쪽은 포함하는 블록 테두리 상자의 왼쪽에 닿습니다(왼쪽에서 오른쪽으로 서식 지정하는 경우, 그렇지 않으면 반대). a float</p> </li> <li><p>BFC 영역은 float 상자와 겹치지 않습니다</p></li> <li><p>BFC는 페이지에서 격리된 독립 컨테이너이며, 그 반대의 경우도 마찬가지입니다. BFC 계산 높이 시 플로팅 요소도 계산에 참여</p></li> <li><p> 트리거 BFC</p></li> </ul> <h3>루트 요소</h3> <ul class=" list-paddingleft-2"> <li><p>float 속성이 없음이 아닙니다(예: 왼쪽 | 오른쪽) </p></li> <li><p>오버플로 값이 표시되지 않습니다. (예: 숨김 | 자동 | 스크롤) </p></li> <li><p>표시 속성 값은 inline-block | flex | inline-flex | table-cell | table-caption</p></li> <li><p>위치는 절대 또는 고정입니다</p></li> <li><p> </p></li> 여백 오버레이 해결 문제</ul> <h3>는 여전히 위의 예입니다. 현재 페이지의 요소가 표준 흐름에 있으므로 규칙에 따라 본문 요소는 BFC입니다</h3> <h4><pre class="brush:php;toolbar:false">同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠</pre></h4>. <p>이제 display:inline-block 속성을 div1로 설정합니다</p> <div class="cnblogs_code"> </div> <p></p> <p><img src="https://img.php.cn/upload/article/000/000/001/8d322ce836c32aab0c6c9356bec2005a-3.png" alt=""></p>이때 div1 요소는 display:inline-block을 통해 BFC를 트리거하므로 이때 div1은 규칙에 따라 독립적인 BFC입니다. <p><img src="https://img.php.cn/upload/article/000/000/001/8d322ce836c32aab0c6c9356bec2005a-4.png" alt=""></p> <pre class="brush:php;toolbar:false">BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然</pre> <p>이므로 이때 마진이 겹치는 일은 없을 것입니다. </p> <div class="cnblogs_code">내부 플로트 지우기</div> <p>표준 흐름에서 상자의 모든 하위 요소가 플로팅되고 상자에 높이가 설정되지 않으면 상자의 전체 높이가 축소됩니다. 아래 예를 참조하세요. </p> <pre class="brush:php;toolbar:false"> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC清除内部浮动</title> 6 <style type="text/css"> 7 .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;} 8 .parent {width: 300px; border: 1px solid #95E1D3;} 9 </style>10 </head>11 <body>12 <div class="parent">13 <div class="child"></div>14 <div class="child"></div>15 </div>16 </body>17 </html></pre> <h4></h4> <p></p> <div class="cnblogs_code">상위 컨테이너는 두 개의 하위 div에서 지원됩니다. 이제 하위에 float를 추가합니다</div> <p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-5.png" alt=""></p> <p></p> <p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-6.png" alt="">이 때 상위 컨테이너는 두 개의 겹치는 선이 됩니다. 0은 소위 높이 붕괴입니다. 규칙대로</p> <p></p> <pre class="brush:php;toolbar:false">计算BFC的高度时，浮动元素也参与计算</pre> <img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-7.png" alt=""><p>这时候可以触发parent生成BFC，那么parent在计算高度时，parent内部的浮动元素child也会参与计算</p> <p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-8.png" alt=""></p> <p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-9.png" alt=""></p> <h4>布局</h4> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC布局</title> 6 <style type="text/css"> 7 .left {width: 100px; height: 100px; background-color: #FCE38A; float: left;} 8 .right {width: 300px; height: 150px; background-color: #95E1D3;} 9 10 </style>11 </head>12 <body>13 <div class="left"></div>14 <div class="right"></div>15 </body>16 </html></pre></div> <p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-10.png" alt=""></p> <p>根据规则</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此</pre></div> <p>所以即使left设置了左浮动，right的的左边依然会与包含块的左边（即body）相接触。接着我们可以根据规则</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">BFC的区域不会与float box重叠</pre></div> <p>让right触发产生BFC，这样right就不会与left重叠了</p> <p><img src="https://img.php.cn/upload/article/000/000/001/ec094113ae178c5a44a9f00011b32c5d-11.png" alt=""></p> <p><img src="https://img.php.cn/upload/article/000/000/001/ec094113ae178c5a44a9f00011b32c5d-12.png" alt=""></p> <p>这样就形成了常见的两列布局。</p> <p><strong><span style="color: #ff0000;">总之记住一点BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，同样的，外面的元素也不会影响到容器里面的子元素。</span></strong></p><p>위 내용은 BFC란 무엇인가요? BFC에 대한 간단한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="Flexbox를 사용한 유연한 레이아웃 공유 예" href="http://m.php.cn/ko/faq/371935.html">Flexbox를 사용한 유연한 레이아웃 공유 예</a></span><span>다음 기사：<a class="dBlack" title="Flexbox를 사용한 유연한 레이아웃 공유 예" href="http://m.php.cn/ko/faq/371937.html">Flexbox를 사용한 유연한 레이아웃 공유 예</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>