3 4 5 BFC</ titre > 6 <style type="text/css">"/><meta property="og:local" content="fr">
<meta property="og:title" content="Qu’est-ce que BFC ? Une compréhension simple de bfc-tutoriel HTML-php.cn">
<meta property="og:description" content="Introduction Avant de parler de BFC, regardons un exemple 1 <!DOCTYPE html> 2 <html lang="fr"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</ titre > 6 <style type="text/css">">
<meta property="og:url" content="https://m.php.cn/fr/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/fr/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/fr/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:'Voir plus',
FoldUp:'Replier',
Choice:'langue',
wait:'Chargement, veuillez patienter ~',
LoginFirst:"S'il vous plait Connectez-vous d'abord",
needKeyword:'Entrez la recherche par mot-clé',
emailPhoneError:'Veuillez saisir le bon numéro de téléphone ou l'adresse e-mail',
missPwd:'S'il vous plaît entrer le mot de passe',
emailError:'Veuillez entrer votre adresse e-mail correcte',
VerCode:"entrez le code de vérification S'il vous plait",
getCode:'Envoi en cours',
pwdError:'Format de mot de passe incorrect',
TwoPassNotMatch:'Deux mots de passe ne correspondent pas',
Bindemail:'Lier un e-mail',
resetpassword:'réinitialiser le mot de passe',
ConfirmPass:'Confirmez le mot de passe',
pwdCheck:'Veuillez saisir 6 à 18 lettres ou chiffres',
Editinfor: 'Modifier les informations personnelles',
trimContent:'Veuillez saisir le contenu',
titleCheck:'Le titre doit contenir au moins 5 mots',
choiceLang:'Veuillez sélectionner une classification linguistique',
Secondreply:'répondre',
NetWorkError:'Erreur réseau, veuillez réessayer plus tard !',
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":"Qu’est-ce que BFC ? Une compréhension simple de bfc","description":"Introduction Avant de parler de BFC, regardons un exemple 1 <!DOCTYPE html> 2 <html lang=\"fr\"> 3 <head> 4 <meta charset=\"UTF-8\"> 5 <title>BFC<\/ titre > 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\/fr\/member\/1506.html","name":"零下一度"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/fr\/faq\/371936.html"},"url":"https:\/\/m.php.cn\/fr\/faq\/371936.html","articleBody":"<h3>Introduction<\/h3>\n<p>Avant de parler de BFC, jetons un œil à un exemple<\/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>Comme vous pouvez le constater , le bloc L'ordre des éléments de niveau est de haut en bas Même si la largeur de la ligne peut accueillir plusieurs éléments, ajoutez maintenant des marges à div1 et div2 en même temps <\/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>À l'origine, la marge inférieure de div1 est de 50px et la marge supérieure de div2 est de 50px. Logiquement, la distance entre eux devrait être de 100px, mais ici elle n'est que de 50px. un contexte de mise en page au niveau du bloc La marge verticale entre deux boîtes adjacentes au niveau du bloc est réduite, ce qui correspond à la fusion de marge introduite dans <p><span style=\"max-width:90%\">Note d'étude CSS 07 Modèle de boîte<span style=\"color: #0000ff;\"><\/span> Comment résoudre ce problème. ? Qu'en est-il du phénomène de fusion des marges ? Cela implique le BFC qui sera présenté ci-dessous. <\/span><\/p>Qu'est-ce que BFC<h3><\/h3>\n<p><span style=\"color: #ff0000;\">Les contextes de formatage de bloc sont un contexte de formatage au niveau du bloc. Il s'agit d'une zone de rendu indépendante<strong><\/strong>, uniquement une boîte au niveau du bloc. Participation, elle stipule comment la boîte interne au niveau du bloc (élément avec les attributs d'affichage du bloc, de l'élément de liste, du tableau) est disposée et n'a rien à voir avec l'extérieur de cette zone. Parmi eux, le contexte de formatage est un conteneur qui détermine comment restituer le document. Le contexte de formatage est un concept de la spécification CSS2.1 du W3C. Il s'agit d'une zone de rendu sur la page et comporte un ensemble de règles de rendu qui déterminent la manière dont ses sous-éléments seront positionnés ainsi que leurs relations et interactions avec d'autres éléments. Les contextes de formatage les plus courants sont le contexte de formatage en bloc (BFC) et le contexte de formatage en ligne (IFC). Il n'y a que BFC et IFC dans CSS2.1, et GFC et FFC sont également ajoutés dans CSS3. <\/span><\/p>\n<p><strong>En termes simples, BFC est une boîte indépendante, et la disposition dans cette boîte indépendante n'est pas affectée par l'extérieur. Bien sûr, cela n'affectera pas les éléments externes. <span style=\"color: #ff0000;\"><\/span><\/strong><\/p>Lorsque la présentation du document démarre, un BFC sera automatiquement créé pour disposer la page entière. Lorsqu'un nouveau BFC n'est pas créé, le document entier sera ce BFC. <p><\/p>Règles BFC<h3><\/h3>\n<ul class=\" list-paddingleft-2\">\n<li>Les cases internes seront placées les unes après les autres dans le sens vertical, en commençant par le haut (comme le montre l'exemple ci-dessus)<p><\/p>\n<\/li>\n<li>Dans le même BFC, dans deux éléments adjacents au niveau du bloc, la marge verticale s'effondrera<p><\/p>\n<\/li>\n<li>Le côté gauche de la zone de marge de chaque élément , et Les côtés gauches de la bordure du bloc conteneur se touchent (pour un formatage de gauche à droite, sinon l'inverse), même s'il y a un flottant <p><\/p>\n<\/li>\n<li>La zone de BFC ne chevauchera pas la float box<p><\/p>\n<\/li>\n<li>BFC est un conteneur indépendant isolé sur la page. Les sous-éléments à l'intérieur du conteneur n'affecteront pas les éléments extérieurs et vice versa<p>. <\/p>\n<\/li>\n<li> Calcul Lorsque la hauteur de BFC est calculée, les éléments flottants participent également au calcul <p><\/p>\n<\/li>\n<\/ul> déclenche BFC<h3><\/h3>\n<ul class=\" list-paddingleft-2\">\n<li>élément racine<p><\/p>\n<\/li>\n<li> L'attribut float n'est pas nul (tel que : gauche | droite) <p><\/p>\n<\/li>\n<li>La valeur du débordement n'est pas visible (telle que as : caché | défilement automatique) <p><\/p>\n<\/li>\n<li>La valeur de l'attribut d'affichage est inline-block | inline-flex | table-caption<p><\/p>\n<\/li>\n<li>la position est absolue ou fixe<p><\/p>\n<\/li>\n<\/ul>Appliquer BFC<h3><\/h3>Résoudre le problème de superposition de marge<h4><\/h4>C'est toujours l'exemple ci-dessus, car les éléments de la page est dans un flux standard à ce moment, donc l'élément body est un BFC à ce moment, selon les règles<p><\/p>\n<div class=\"cnblogs_code\"><pre>同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠<\/pre><\/div>Définissez maintenant l'attribut display:inline-block à div1<p><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-3.png\" alt=\"\"><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8d322ce836c32aab0c6c9356bec2005a-4.png\" alt=\"\"><\/p>À ce moment Puisque l'élément div1 déclenche BFC via display:inline-block, div1 est un BFC indépendant à ce moment . Selon les règles <p><\/p>\n<div class=\"cnblogs_code\"><pre>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然<\/pre><\/div>, il n'y aura pas de chevauchement de marge pour le moment. <p><\/p>Effacer les flotteurs internes<h4><\/h4>Lorsque tous les éléments enfants d'une boîte dans un flux standard flottent et qu'aucune hauteur n'est définie pour la boîte, alors toute la hauteur de la boîte s'effondrera. ça veut dire ? Regardez l'exemple ci-dessous <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>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-5.png\" alt=\"\"><\/p>Le conteneur parent est pris en charge par deux divs enfants. 🎜 ><p><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-6.png\" alt=\"\"><\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/b96b54d696cf1f8d8553339a5a1f0ae7-7.png\" alt=\"\">À ce stade, le conteneur parent est devenu deux lignes qui se chevauchent, c'est-à-dire que la hauteur est devenue 0, ce qui est le soi- appelé hauteur Réduire. Selon le règlement<\/p>\n<p><\/p>\n<div class=\"cnblogs_code\">\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>\n<\/div><\/.>"}</script></head><body><div class="bodyBg"><!--头部--><div class="nphpHead"><div class="nphpTop"><div class="nphpTopIn"><div class="nphpLogo"><a href="http://m.php.cn/fr/" title="Site Web PHP chinois"></a></div><div class="nphpSubmit"><!-- <a href="http://m.php.cn/fr/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:;" class="language course-right-orders chooselan chooselanguage" 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/fr/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/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/update/article_0_1.html" >mises à jour récentes</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/fr/" title="Maison" class="bBlack">Maison</a> >
<a href="http://m.php.cn/fr/article.html" title="Article" class="bBlack">Article</a> > <a href="http://m.php.cn/fr/web-designer.html" class="cBlack">interface Web</a> > Qu’est-ce que BFC ? Une compréhension simple de bfc</p><!-- <p><a href="http://m.php.cn/fr/article.html" class="cBlack">Articles techniques</a> > <a href="http://m.php.cn/fr/web-designer.html" class="cBlack">interface Web</a> > <a href="http://m.php.cn/fr/div-tutorial.html" class="cBlack">tutoriel HTML</a> > Qu’est-ce que BFC ? Une compréhension simple de bfc</p> --><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>Qu’est-ce que BFC ? Une compréhension simple de 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>12058parcourir</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><h3>Introduction</h3>
<p>Avant de parler de BFC, jetons un œil à un exemple</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>Comme vous pouvez le constater , le bloc L'ordre des éléments de niveau est de haut en bas Même si la largeur de la ligne peut accueillir plusieurs éléments, ajoutez maintenant des marges à div1 et div2 en même temps </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>À l'origine, la marge inférieure de div1 est de 50px et la marge supérieure de div2 est de 50px. Logiquement, la distance entre eux devrait être de 100px, mais ici elle n'est que de 50px. un contexte de mise en page au niveau du bloc La marge verticale entre deux boîtes adjacentes au niveau du bloc est réduite, ce qui correspond à la fusion de marge introduite dans <p><span style="max-width:90%">Note d'étude CSS 07 Modèle de boîte<span style="color: #0000ff;"></span> Comment résoudre ce problème. ? Qu'en est-il du phénomène de fusion des marges ? Cela implique le BFC qui sera présenté ci-dessous. </span></p>Qu'est-ce que BFC<h3></h3>
<p><span style="color: #ff0000;">Les contextes de formatage de bloc sont un contexte de formatage au niveau du bloc. Il s'agit d'une zone de rendu indépendante<strong></strong>, uniquement une boîte au niveau du bloc. Participation, elle stipule comment la boîte interne au niveau du bloc (élément avec les attributs d'affichage du bloc, de l'élément de liste, du tableau) est disposée et n'a rien à voir avec l'extérieur de cette zone. Parmi eux, le contexte de formatage est un conteneur qui détermine comment restituer le document. Le contexte de formatage est un concept de la spécification CSS2.1 du W3C. Il s'agit d'une zone de rendu sur la page et comporte un ensemble de règles de rendu qui déterminent la manière dont ses sous-éléments seront positionnés ainsi que leurs relations et interactions avec d'autres éléments. Les contextes de formatage les plus courants sont le contexte de formatage en bloc (BFC) et le contexte de formatage en ligne (IFC). Il n'y a que BFC et IFC dans CSS2.1, et GFC et FFC sont également ajoutés dans CSS3. </span></p>
<p><strong>En termes simples, BFC est une boîte indépendante, et la disposition dans cette boîte indépendante n'est pas affectée par l'extérieur. Bien sûr, cela n'affectera pas les éléments externes. <span style="color: #ff0000;"></span></strong></p>Lorsque la présentation du document démarre, un BFC sera automatiquement créé pour disposer la page entière. Lorsqu'un nouveau BFC n'est pas créé, le document entier sera ce BFC. <p></p>Règles BFC<h3></h3>
<ul class=" list-paddingleft-2">
<li>Les cases internes seront placées les unes après les autres dans le sens vertical, en commençant par le haut (comme le montre l'exemple ci-dessus)<p></p>
</li>
<li>Dans le même BFC, dans deux éléments adjacents au niveau du bloc, la marge verticale s'effondrera<p></p>
</li>
<li>Le côté gauche de la zone de marge de chaque élément , et Les côtés gauches de la bordure du bloc conteneur se touchent (pour un formatage de gauche à droite, sinon l'inverse), même s'il y a un flottant <p></p>
</li>
<li>La zone de BFC ne chevauchera pas la float box<p></p>
</li>
<li>BFC est un conteneur indépendant isolé sur la page. Les sous-éléments à l'intérieur du conteneur n'affecteront pas les éléments extérieurs et vice versa<p>. </p>
</li>
<li> Calcul Lorsque la hauteur de BFC est calculée, les éléments flottants participent également au calcul <p></p>
</li>
</ul> déclenche BFC<h3></h3>
<ul class=" list-paddingleft-2">
<li>élément racine<p></p>
</li>
<li> L'attribut float n'est pas nul (tel que : gauche | droite) <p></p>
</li>
<li>La valeur du débordement n'est pas visible (telle que as : caché | défilement automatique) <p></p>
</li>
<li>La valeur de l'attribut d'affichage est inline-block | inline-flex | table-caption<p></p>
</li>
<li>la position est absolue ou fixe<p></p>
</li>
</ul>Appliquer BFC<h3></h3>Résoudre le problème de superposition de marge<h4></h4>C'est toujours l'exemple ci-dessus, car les éléments de la page est dans un flux standard à ce moment, donc l'élément body est un BFC à ce moment, selon les règles<p></p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠</pre></div>Définissez maintenant l'attribut display:inline-block à div1<p></p>
<p><img src="https://img.php.cn/upload/article/000/000/001/8d322ce836c32aab0c6c9356bec2005a-3.png" alt=""></p>
<p><img src="https://img.php.cn/upload/article/000/000/001/8d322ce836c32aab0c6c9356bec2005a-4.png" alt=""></p>À ce moment Puisque l'élément div1 déclenche BFC via display:inline-block, div1 est un BFC indépendant à ce moment . Selon les règles <p></p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然</pre></div>, il n'y aura pas de chevauchement de marge pour le moment. <p></p>Effacer les flotteurs internes<h4></h4>Lorsque tous les éléments enfants d'une boîte dans un flux standard flottent et qu'aucune hauteur n'est définie pour la boîte, alors toute la hauteur de la boîte s'effondrera. ça veut dire ? Regardez l'exemple ci-dessous <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>
<p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-5.png" alt=""></p>Le conteneur parent est pris en charge par deux divs enfants. 🎜 ><p></p>
<p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-6.png" alt=""></p>
<p><img src="https://img.php.cn/upload/article/000/000/001/b96b54d696cf1f8d8553339a5a1f0ae7-7.png" alt="">À ce stade, le conteneur parent est devenu deux lignes qui se chevauchent, c'est-à-dire que la hauteur est devenue 0, ce qui est le soi- appelé hauteur Réduire. Selon le règlement</p>
<p></p>
<div class="cnblogs_code">
<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>
</div></.><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Exemple de partage de mise en page flexible à l'aide de flexbox" href="http://m.php.cn/fr/faq/371935.html">Exemple de partage de mise en page flexible à l'aide de flexbox</a></span><span>Article suivant：<a class="dBlack" title="Exemple de partage de mise en page flexible à l'aide de flexbox" href="http://m.php.cn/fr/faq/371937.html">Exemple de partage de mise en page flexible à l'aide de flexbox</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</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/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</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/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</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/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</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/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</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:;" class="language course-right-orders chooselan chooselanguage" 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><!--顶部导航 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>