3 4 5 BFC</ Titel > 6 <style type="text/css">"/><meta property="og:local" content="de">
<meta property="og:title" content="Was ist BFC? Ein einfaches Verständnis von bfc-HTML-Tutorial-php.cn">
<meta property="og:description" content="Einleitung Bevor wir über BFC sprechen, werfen wir einen Blick auf ein Beispiel: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</ Titel > 6 <style type="text/css">">
<meta property="og:url" content="https://m.php.cn/de/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="http://www.php.cn/de/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><link rel="canonical" href="http://www.php.cn/de/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" />
<script> var canshu = {
SeeMore:'Mehr sehen',
FoldUp:'Zusammenklappen',
Choice:'Sprache',
wait:'Laden, bitte warten~',
LoginFirst:"Bitte loggen Sie sich zuerst ein",
needKeyword:'Geben Sie die Stichwortsuche ein',
emailPhoneError:'Bitte geben Sie die richtige Telefon- oder E-Mail-Adresse ein',
missPwd:'Bitte geben Sie das Passwort ein',
emailError:'Bitte geben Sie Ihre korrekte E-Mail-Adresse ein',
VerCode:"Bitte den Bestätigungscode eingeben",
getCode:'Senden',
pwdError:'Falsches Passwortformat',
TwoPassNotMatch:'Zwei Passwörter stimmen nicht überein',
Bindemail:'E-Mail binden',
resetpassword:'Passwort zurücksetzen',
ConfirmPass:'Bestätige das Passwort',
pwdCheck:'Bitte geben Sie 6-18 Buchstaben oder Zahlen ein',
Editinfor: 'Persönliche Informationen bearbeiten',
trimContent:'Bitte geben Sie Inhalte ein',
titleCheck:'Der Titel sollte mindestens 5 Wörter lang sein',
choiceLang:'Bitte wählen Sie eine Sprachklassifizierung aus',
Secondreply:'Antwort',
NetWorkError:'Netzwerkfehler, bitte versuchen Sie es später noch einmal!',
all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de'
};
</script><!-- Google Tag Manager --><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><!-- End Google Tag Manager --><!-- Google tag (gtag.js) --><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><!--<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6267705206177514" 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":"Was ist BFC? Ein einfaches Verständnis von bfc","description":"Einleitung Bevor wir über BFC sprechen, werfen wir einen Blick auf ein Beispiel: 1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4 <meta charset=\"UTF-8\"> 5 <title>BFC<\/ Titel > 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\/de\/member\/1506.html","name":"零下一度"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/de\/faq\/371936.html"},"url":"https:\/\/m.php.cn\/de\/faq\/371936.html","articleBody":"<h3>Einführung<\/h3>\n<p>Bevor wir über BFC sprechen, werfen wir einen Blick auf ein Beispiel<\/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>Wie Sie sehen können , der Block Die Reihenfolge der Ebenenelemente erfolgt von oben nach unten. Auch wenn die Breite der Zeile mehrere Elemente aufnehmen kann, fügen Sie jetzt gleichzeitig Ränder zu div1 und div2 hinzu <\/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>Ursprünglich beträgt der untere Rand von div1 50 Pixel und der obere Rand von div2 50 Pixel. Logischerweise sollte der Abstand zwischen ihnen 100 Pixel betragen, aber hier beträgt er nur 50 Pixel Ein Layoutkontext auf Blockebene Der vertikale Rand zwischen zwei benachbarten Boxen auf Blockebene wird reduziert. Dies ist die in <span style=\"color: #0000ff;\"><span style=\"color: #0000ff;\">CSS Study Note 07 Box Model<\/span><\/span> eingeführte Randverschmelzung Problem? Was ist mit dem Phänomen der Margenverschmelzung? Dies betrifft den BFC, der im Folgenden vorgestellt wird. <\/p>\n<h3>Was ist BFC?<\/h3>\n<p><span style=\"color: #ff0000;\"><strong>Block Formatting Contexts ist ein Formatierungskontext auf Blockebene. Es handelt sich um einen unabhängigen Rendering-Bereich<\/strong><\/span>, nur eine Box auf Blockebene Die Teilnahme legt fest, wie die interne Box auf Blockebene (Element mit den Anzeigeattributen Block, Listenelement, Tabelle) angeordnet ist, und hat nichts mit der Außenseite dieses Bereichs zu tun. Unter ihnen ist der Formatierungskontext ein Container, der bestimmt, wie das Dokument gerendert wird. Der Formatierungskontext ist ein Konzept in der W3C-Spezifikation CSS2.1. Es handelt sich um einen Rendering-Bereich auf der Seite und verfügt über eine Reihe von Rendering-Regeln, die bestimmen, wie seine Unterelemente positioniert werden und welche Beziehung und Interaktion sie mit anderen Elementen haben. Die gebräuchlichsten Formatierungskontexte sind Blockformatierungskontext (BFC) und Inline-Formatierungskontext (IFC). In CSS2.1 gibt es nur BFC und IFC, und in CSS3 werden auch GFC und FFC hinzugefügt. <\/p>\n<p><strong><span style=\"color: #ff0000;\">Für Laien ist BFC eine unabhängige Box, und das Layout in dieser unabhängigen Box wird von außen natürlich nicht beeinflusst. <\/span><\/strong><\/p>\n<p>Wenn die Dokumentpräsentation beginnt, wird automatisch ein BFC erstellt, um die gesamte Seite zu gestalten. Wenn kein neuer BFC erstellt wird, wird das gesamte Dokument dieser BFC sein. <\/p>\n<h3>BFC-Regeln<\/h3>\n<ul class=\" list-paddingleft-2\">\n<li><p>Die internen Boxen werden nacheinander in vertikaler Richtung, beginnend von oben, platziert (wie im Beispiel oben zu sehen ist)<\/p><\/li>\n<li><p>Im selben BFC wird in zwei benachbarten Elementen auf Blockebene der vertikale Rand reduziert<\/p><\/li>\n<li><p>Die linke Seite des Randfelds jedes Elements , und Die linken Seiten des umgebenden Blockrahmenfelds berühren sich (für die Formatierung von links nach rechts, andernfalls das Gegenteil), auch wenn ein Float vorhanden ist <\/p><\/li>\n<li><p>Der Bereich von BFC überschneidet sich nicht mit der Float-Box<\/p><\/li>\n<li>\n<p>BFC ist ein isolierter unabhängiger Container auf der Seite. Die Unterelemente innerhalb des Containers haben keinen Einfluss auf die äußeren Elemente und umgekehrt<\/p> <\/li>\n<li><p> Berechnung Wenn die Höhe von BFC berechnet wird, nehmen auch schwebende Elemente an der Berechnung teil <\/p><\/li>\n<\/ul>\n<h3> löst BFC aus<\/h3>\n<ul class=\" list-paddingleft-2\">\n<li><p>Wurzelelement<\/p><\/li>\n<li><p>Das Float-Attribut ist nicht none (z. B.: links | rechts) <\/p><\/li>\n<li><p>Der Wert des Überlaufs ist nicht sichtbar (z. B als: versteckt |. auto |. scroll) <\/p><\/li>\n<li>Der Anzeigeattributwert ist inline-flex | ><p>Position ist absolut oder fest<\/p>\n<\/li>\n<li><p>BFC anwenden<\/p><\/li>Lösen Sie das Randüberlagerungsproblem<\/ul>\n<h3>Es ist immer noch das obige Beispiel, weil die Elemente von Die Seite befindet sich zu diesem Zeitpunkt in einem Standardfluss, daher ist das Body-Element zu diesem Zeitpunkt gemäß den Regeln ein BFC<\/h3>\n<h4><\/h4>\n<p><\/p>Setzen Sie nun das display:inline-block-Attribut ein zu div1<div class=\"cnblogs_code\"><pre>同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠<\/pre><\/div>\n<p><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-3.png\" alt=\"\"><\/p>Zu diesem Zeitpunkt Da das div1-Element den BFC über display:inline-block auslöst, ist div1 zu diesem Zeitpunkt ein Unabhängiger BFC. Gemäß den Regeln <p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-4.png\" alt=\"\"><\/p>\n<p><\/p> wird es zu diesem Zeitpunkt keine Margenüberschneidungen geben. <div class=\"cnblogs_code\">\n<pre>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然<\/pre>Interne Floats löschen<\/div>\n<p>Wenn alle untergeordneten Elemente in einer Box in einem Standardfluss schweben und keine Höhe für die Box festgelegt ist, wird die gesamte Höhe der Box reduziert. Was bewirkt Das heißt? Schauen Sie sich das Beispiel unten an <\/p>\n<h4><\/h4>\n<p><\/p>\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 .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><\/div>Fügen Sie nun einen Float zum untergeordneten Element hinzu <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=\"\"><\/p>Zu diesem Zeitpunkt ist der übergeordnete Container zu zwei überlappenden Linien geworden, das heißt, die Höhe ist 0 geworden, was so- namens Höhe Kollaps. Nach den Regeln<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-7.png\" alt=\"\"><\/p>\n<p><\/p>\n<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/de/" title="Chinesische PHP-Website"></a></div><div class="nphpSubmit"><!-- <a href="http://m.php.cn/de/search" class="bg1"></a> --><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:setlang('ko');" class="language course-right-orders chooselan " 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:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><a href="http://m.php.cn/de/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/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/update/article_0_1.html" >kürzliche Updates</a></div><div class="clear"></div></div></div><script> var swiper = new Swiper('.nphpNavSwiper', {
slidesPerView : 'auto'
});
</script></div></div></div><!--头部 end--><div class="bodyMain"><!--所在位置--><div class="nphpSize"><div class="nphpSizeIn"><b></b><p><a href="http://m.php.cn/de/" title="Heim" class="bBlack">Heim</a> >
<a href="http://m.php.cn/de/article.html" title="Artikel" class="bBlack">Artikel</a> > <a href="http://m.php.cn/web-designer.html" class="cBlack">Web-Frontend</a> > Was ist BFC? Ein einfaches Verständnis von bfc</p><!-- <p><a href="http://m.php.cn/de/article.html" class="cBlack">Technische Artikel</a> > <a href="http://m.php.cn/web-designer.html" class="cBlack">Web-Frontend</a> > <a href="http://m.php.cn/de/div-tutorial.html" class="cBlack">HTML-Tutorial</a> > Was ist BFC? Ein einfaches Verständnis von bfc</p> --><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>Was ist BFC? Ein einfaches Verständnis von 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'>Original</i><div class="clear"></div></dt><dd><em>2017-07-02 09:38:13</em><i>12058Durchsuche</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><h3>Einführung</h3>
<p>Bevor wir über BFC sprechen, werfen wir einen Blick auf ein Beispiel</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>Wie Sie sehen können , der Block Die Reihenfolge der Ebenenelemente erfolgt von oben nach unten. Auch wenn die Breite der Zeile mehrere Elemente aufnehmen kann, fügen Sie jetzt gleichzeitig Ränder zu div1 und div2 hinzu </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>Ursprünglich beträgt der untere Rand von div1 50 Pixel und der obere Rand von div2 50 Pixel. Logischerweise sollte der Abstand zwischen ihnen 100 Pixel betragen, aber hier beträgt er nur 50 Pixel Ein Layoutkontext auf Blockebene Der vertikale Rand zwischen zwei benachbarten Boxen auf Blockebene wird reduziert. Dies ist die in <span style="color: #0000ff;"><span style="color: #0000ff;">CSS Study Note 07 Box Model</span></span> eingeführte Randverschmelzung Problem? Was ist mit dem Phänomen der Margenverschmelzung? Dies betrifft den BFC, der im Folgenden vorgestellt wird. </p>
<h3>Was ist BFC?</h3>
<p><span style="color: #ff0000;"><strong>Block Formatting Contexts ist ein Formatierungskontext auf Blockebene. Es handelt sich um einen unabhängigen Rendering-Bereich</strong></span>, nur eine Box auf Blockebene Die Teilnahme legt fest, wie die interne Box auf Blockebene (Element mit den Anzeigeattributen Block, Listenelement, Tabelle) angeordnet ist, und hat nichts mit der Außenseite dieses Bereichs zu tun. Unter ihnen ist der Formatierungskontext ein Container, der bestimmt, wie das Dokument gerendert wird. Der Formatierungskontext ist ein Konzept in der W3C-Spezifikation CSS2.1. Es handelt sich um einen Rendering-Bereich auf der Seite und verfügt über eine Reihe von Rendering-Regeln, die bestimmen, wie seine Unterelemente positioniert werden und welche Beziehung und Interaktion sie mit anderen Elementen haben. Die gebräuchlichsten Formatierungskontexte sind Blockformatierungskontext (BFC) und Inline-Formatierungskontext (IFC). In CSS2.1 gibt es nur BFC und IFC, und in CSS3 werden auch GFC und FFC hinzugefügt. </p>
<p><strong><span style="color: #ff0000;">Für Laien ist BFC eine unabhängige Box, und das Layout in dieser unabhängigen Box wird von außen natürlich nicht beeinflusst. </span></strong></p>
<p>Wenn die Dokumentpräsentation beginnt, wird automatisch ein BFC erstellt, um die gesamte Seite zu gestalten. Wenn kein neuer BFC erstellt wird, wird das gesamte Dokument dieser BFC sein. </p>
<h3>BFC-Regeln</h3>
<ul class=" list-paddingleft-2">
<li><p>Die internen Boxen werden nacheinander in vertikaler Richtung, beginnend von oben, platziert (wie im Beispiel oben zu sehen ist)</p></li>
<li><p>Im selben BFC wird in zwei benachbarten Elementen auf Blockebene der vertikale Rand reduziert</p></li>
<li><p>Die linke Seite des Randfelds jedes Elements , und Die linken Seiten des umgebenden Blockrahmenfelds berühren sich (für die Formatierung von links nach rechts, andernfalls das Gegenteil), auch wenn ein Float vorhanden ist </p></li>
<li><p>Der Bereich von BFC überschneidet sich nicht mit der Float-Box</p></li>
<li>
<p>BFC ist ein isolierter unabhängiger Container auf der Seite. Die Unterelemente innerhalb des Containers haben keinen Einfluss auf die äußeren Elemente und umgekehrt</p> </li>
<li><p> Berechnung Wenn die Höhe von BFC berechnet wird, nehmen auch schwebende Elemente an der Berechnung teil </p></li>
</ul>
<h3> löst BFC aus</h3>
<ul class=" list-paddingleft-2">
<li><p>Wurzelelement</p></li>
<li><p>Das Float-Attribut ist nicht none (z. B.: links | rechts) </p></li>
<li><p>Der Wert des Überlaufs ist nicht sichtbar (z. B als: versteckt |. auto |. scroll) </p></li>
<li>Der Anzeigeattributwert ist inline-flex | ><p>Position ist absolut oder fest</p>
</li>
<li><p>BFC anwenden</p></li>Lösen Sie das Randüberlagerungsproblem</ul>
<h3>Es ist immer noch das obige Beispiel, weil die Elemente von Die Seite befindet sich zu diesem Zeitpunkt in einem Standardfluss, daher ist das Body-Element zu diesem Zeitpunkt gemäß den Regeln ein BFC</h3>
<h4></h4>
<p></p>Setzen Sie nun das display:inline-block-Attribut ein zu div1<div class="cnblogs_code"><pre class="brush:php;toolbar:false">同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠</pre></div>
<p></p>
<p><img src="https://img.php.cn/upload/article/000/000/001/8d322ce836c32aab0c6c9356bec2005a-3.png" alt=""></p>Zu diesem Zeitpunkt Da das div1-Element den BFC über display:inline-block auslöst, ist div1 zu diesem Zeitpunkt ein Unabhängiger BFC. Gemäß den Regeln <p><img src="https://img.php.cn/upload/article/000/000/001/8d322ce836c32aab0c6c9356bec2005a-4.png" alt=""></p>
<p></p> wird es zu diesem Zeitpunkt keine Margenüberschneidungen geben. <div class="cnblogs_code">
<pre class="brush:php;toolbar:false">BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然</pre>Interne Floats löschen</div>
<p>Wenn alle untergeordneten Elemente in einer Box in einem Standardfluss schweben und keine Höhe für die Box festgelegt ist, wird die gesamte Höhe der Box reduziert. Was bewirkt Das heißt? Schauen Sie sich das Beispiel unten an </p>
<h4></h4>
<p></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 .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></div>Fügen Sie nun einen Float zum untergeordneten Element hinzu <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=""></p>Zu diesem Zeitpunkt ist der übergeordnete Container zu zwei überlappenden Linien geworden, das heißt, die Höhe ist 0 geworden, was so- namens Höhe Kollaps. Nach den Regeln<p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-7.png" alt=""></p>
<p></p>
<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>Das obige ist der detaillierte Inhalt vonWas ist BFC? Ein einfaches Verständnis von bfc. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Beispiel für die gemeinsame Nutzung eines flexiblen Layouts mit Flexbox" href="http://m.php.cn/de/faq/371935.html">Beispiel für die gemeinsame Nutzung eines flexiblen Layouts mit Flexbox</a></span><span>Nächster Artikel：<a class="dBlack" title="Beispiel für die gemeinsame Nutzung eines flexiblen Layouts mit Flexbox" href="http://m.php.cn/de/faq/371937.html">Beispiel für die gemeinsame Nutzung eines flexiblen Layouts mit Flexbox</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</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/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</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/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</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:setlang('ko');" class="language course-right-orders chooselan " 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:;" class="language course-right-orders chooselan chooselanguage" 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><!--顶部导航 end--><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>