[{"data":1,"prerenderedAt":1422},["ShallowReactive",2],{"content-query-99Gv6wkcTt":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":5,"title":7,"description":8,"publishedAt":9,"body":10,"_type":1418,"_id":1419,"_source":297,"_file":1420,"_stem":568,"_extension":1421},"/bfc","",false,"BFC 介绍","块格式化上下文（Block Formatting Context，BFC）","2023-02-20",{"type":11,"children":12,"toc":1407},"root",[13,21,27,39,44,56,352,357,363,524,558,578,714,719,730,735,744,882,887,1021,1025,1031,1045,1063,1173,1178,1329,1333,1338,1343,1361,1366,1401],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"bfc-介绍",[19],{"type":20,"value":7},"text",{"type":14,"tag":22,"props":23,"children":25},"h2",{"id":24},"简介",[26],{"type":20,"value":24},{"type":14,"tag":28,"props":29,"children":30},"p",{},[31,37],{"type":14,"tag":32,"props":33,"children":34},"strong",{},[35],{"type":20,"value":36},"块格式化上下文",{"type":20,"value":38}," 是块级盒子在布局过程中发生的区域。",{"type":14,"tag":28,"props":40,"children":41},{},[42],{"type":20,"value":43},"作用： 形成独立的渲染区域， 使得内部元素的渲染不会影响到外界。",{"type":14,"tag":28,"props":45,"children":46},{},[47,49,54],{"type":20,"value":48},"以下方式可以创建 ",{"type":14,"tag":32,"props":50,"children":51},{},[52],{"type":20,"value":53},"BFC",{"type":20,"value":55},":",{"type":14,"tag":57,"props":58,"children":59},"ul",{},[60,73,94,122,149,217,242,275,307,335],{"type":14,"tag":61,"props":62,"children":63},"li",{},[64,66],{"type":20,"value":65},"根元素 ",{"type":14,"tag":67,"props":68,"children":70},"code",{"className":69},[],[71],{"type":20,"value":72},"html",{"type":14,"tag":61,"props":74,"children":75},{},[76,78,84,86,92],{"type":20,"value":77},"浮动元素 (",{"type":14,"tag":67,"props":79,"children":81},{"className":80},[],[82],{"type":20,"value":83},"float",{"type":20,"value":85}," 不是 ",{"type":14,"tag":67,"props":87,"children":89},{"className":88},[],[90],{"type":20,"value":91},"none",{"type":20,"value":93},")",{"type":14,"tag":61,"props":95,"children":96},{},[97,99,105,107,113,115,121],{"type":20,"value":98},"绝对定位元素 (",{"type":14,"tag":67,"props":100,"children":102},{"className":101},[],[103],{"type":20,"value":104},"position",{"type":20,"value":106}," 为 ",{"type":14,"tag":67,"props":108,"children":110},{"className":109},[],[111],{"type":20,"value":112},"fixed",{"type":20,"value":114}," 或 ",{"type":14,"tag":67,"props":116,"children":118},{"className":117},[],[119],{"type":20,"value":120},"absolute",{"type":20,"value":93},{"type":14,"tag":61,"props":123,"children":124},{},[125,131,133,139,141,147],{"type":14,"tag":67,"props":126,"children":128},{"className":127},[],[129],{"type":20,"value":130},"display",{"type":20,"value":132}," 值为 ",{"type":14,"tag":67,"props":134,"children":136},{"className":135},[],[137],{"type":20,"value":138},"inline-block",{"type":20,"value":140},", ",{"type":14,"tag":67,"props":142,"children":144},{"className":143},[],[145],{"type":20,"value":146},"flow-root",{"type":20,"value":148},"的元素。",{"type":14,"tag":61,"props":150,"children":151},{},[152,154,159,160,166,167,173,174,180,181,187,188,194,195,201,202,208,209,215],{"type":20,"value":153},"表格相关的元素(即",{"type":14,"tag":67,"props":155,"children":157},{"className":156},[],[158],{"type":20,"value":130},{"type":20,"value":106},{"type":14,"tag":67,"props":161,"children":163},{"className":162},[],[164],{"type":20,"value":165},"inline-table",{"type":20,"value":140},{"type":14,"tag":67,"props":168,"children":170},{"className":169},[],[171],{"type":20,"value":172},"table",{"type":20,"value":140},{"type":14,"tag":67,"props":175,"children":177},{"className":176},[],[178],{"type":20,"value":179},"table-row",{"type":20,"value":140},{"type":14,"tag":67,"props":182,"children":184},{"className":183},[],[185],{"type":20,"value":186},"table-row-group",{"type":20,"value":140},{"type":14,"tag":67,"props":189,"children":191},{"className":190},[],[192],{"type":20,"value":193},"table-header-group",{"type":20,"value":140},{"type":14,"tag":67,"props":196,"children":198},{"className":197},[],[199],{"type":20,"value":200},"table-footer-group",{"type":20,"value":140},{"type":14,"tag":67,"props":203,"children":205},{"className":204},[],[206],{"type":20,"value":207},"table-cell",{"type":20,"value":140},{"type":14,"tag":67,"props":210,"children":212},{"className":211},[],[213],{"type":20,"value":214},"table-caption",{"type":20,"value":216},")。",{"type":14,"tag":61,"props":218,"children":219},{},[220,226,227,233,234,240],{"type":14,"tag":67,"props":221,"children":223},{"className":222},[],[224],{"type":20,"value":225},"overflow",{"type":20,"value":85},{"type":14,"tag":67,"props":228,"children":230},{"className":229},[],[231],{"type":20,"value":232},"visible",{"type":20,"value":114},{"type":14,"tag":67,"props":235,"children":237},{"className":236},[],[238],{"type":20,"value":239},"clip",{"type":20,"value":241}," 的块元素",{"type":14,"tag":61,"props":243,"children":244},{},[245,247,252,254,260,261,267,268,273],{"type":20,"value":246},"弹性元素或网格元素的 ",{"type":14,"tag":32,"props":248,"children":249},{},[250],{"type":20,"value":251},"直接子元素",{"type":20,"value":253}," （当该子元素不是 ",{"type":14,"tag":67,"props":255,"children":257},{"className":256},[],[258],{"type":20,"value":259},"flex",{"type":20,"value":140},{"type":14,"tag":67,"props":262,"children":264},{"className":263},[],[265],{"type":20,"value":266},"grid",{"type":20,"value":140},{"type":14,"tag":67,"props":269,"children":271},{"className":270},[],[272],{"type":20,"value":172},{"type":20,"value":274}," 时）",{"type":14,"tag":61,"props":276,"children":277},{},[278,284,285,291,292,298,299,305],{"type":14,"tag":67,"props":279,"children":281},{"className":280},[],[282],{"type":20,"value":283},"contain",{"type":20,"value":132},{"type":14,"tag":67,"props":286,"children":288},{"className":287},[],[289],{"type":20,"value":290},"layout",{"type":20,"value":140},{"type":14,"tag":67,"props":293,"children":295},{"className":294},[],[296],{"type":20,"value":297},"content",{"type":20,"value":140},{"type":14,"tag":67,"props":300,"children":302},{"className":301},[],[303],{"type":20,"value":304},"paint",{"type":20,"value":306}," 的元素",{"type":14,"tag":61,"props":308,"children":309},{},[310,312,318,319,325,327,333],{"type":20,"value":311},"多列容器（",{"type":14,"tag":67,"props":313,"children":315},{"className":314},[],[316],{"type":20,"value":317},"column-count",{"type":20,"value":114},{"type":14,"tag":67,"props":320,"children":322},{"className":321},[],[323],{"type":20,"value":324},"column-width",{"type":20,"value":326},"值不为",{"type":14,"tag":67,"props":328,"children":330},{"className":329},[],[331],{"type":20,"value":332},"auto",{"type":20,"value":334},"）",{"type":14,"tag":61,"props":336,"children":337},{},[338,344,345,351],{"type":14,"tag":67,"props":339,"children":341},{"className":340},[],[342],{"type":20,"value":343},"column-span",{"type":20,"value":106},{"type":14,"tag":67,"props":346,"children":348},{"className":347},[],[349],{"type":20,"value":350},"all",{"type":20,"value":306},{"type":14,"tag":22,"props":353,"children":355},{"id":354},"应用",[356],{"type":20,"value":354},{"type":14,"tag":358,"props":359,"children":361},"h3",{"id":360},"包含内部浮动元素",[362],{"type":20,"value":360},{"type":14,"tag":364,"props":365,"children":368},"pre",{"className":366,"code":367,"language":72,"meta":5,"style":5},"language-html shiki shiki-themes github-dark github-dark","\u003Cdiv id=\"basic\" style=\"background: blue;\">\n  \u003Cdiv style=\"float: left; margin-top: 3px; background: red;\">\n    float: left; margin-top: 3px; background: red;\n  \u003C/div>\n  \u003Cdiv>background:blue;\u003C/div>\n\u003C/div>\n",[369],{"type":14,"tag":67,"props":370,"children":371},{"__ignoreMap":5},[372,426,456,465,482,507],{"type":14,"tag":373,"props":374,"children":377},"span",{"class":375,"line":376},"line",1,[378,384,390,396,401,407,412,416,421],{"type":14,"tag":373,"props":379,"children":381},{"style":380},"--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8",[382],{"type":20,"value":383},"\u003C",{"type":14,"tag":373,"props":385,"children":387},{"style":386},"--shiki-default:#85E89D;--shiki-dark:#85E89D",[388],{"type":20,"value":389},"div",{"type":14,"tag":373,"props":391,"children":393},{"style":392},"--shiki-default:#B392F0;--shiki-dark:#B392F0",[394],{"type":20,"value":395}," id",{"type":14,"tag":373,"props":397,"children":398},{"style":380},[399],{"type":20,"value":400},"=",{"type":14,"tag":373,"props":402,"children":404},{"style":403},"--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF",[405],{"type":20,"value":406},"\"basic\"",{"type":14,"tag":373,"props":408,"children":409},{"style":392},[410],{"type":20,"value":411}," style",{"type":14,"tag":373,"props":413,"children":414},{"style":380},[415],{"type":20,"value":400},{"type":14,"tag":373,"props":417,"children":418},{"style":403},[419],{"type":20,"value":420},"\"background: blue;\"",{"type":14,"tag":373,"props":422,"children":423},{"style":380},[424],{"type":20,"value":425},">\n",{"type":14,"tag":373,"props":427,"children":429},{"class":375,"line":428},2,[430,435,439,443,447,452],{"type":14,"tag":373,"props":431,"children":432},{"style":380},[433],{"type":20,"value":434},"  \u003C",{"type":14,"tag":373,"props":436,"children":437},{"style":386},[438],{"type":20,"value":389},{"type":14,"tag":373,"props":440,"children":441},{"style":392},[442],{"type":20,"value":411},{"type":14,"tag":373,"props":444,"children":445},{"style":380},[446],{"type":20,"value":400},{"type":14,"tag":373,"props":448,"children":449},{"style":403},[450],{"type":20,"value":451},"\"float: left; margin-top: 3px; background: red;\"",{"type":14,"tag":373,"props":453,"children":454},{"style":380},[455],{"type":20,"value":425},{"type":14,"tag":373,"props":457,"children":459},{"class":375,"line":458},3,[460],{"type":14,"tag":373,"props":461,"children":462},{"style":380},[463],{"type":20,"value":464},"    float: left; margin-top: 3px; background: red;\n",{"type":14,"tag":373,"props":466,"children":468},{"class":375,"line":467},4,[469,474,478],{"type":14,"tag":373,"props":470,"children":471},{"style":380},[472],{"type":20,"value":473},"  \u003C/",{"type":14,"tag":373,"props":475,"children":476},{"style":386},[477],{"type":20,"value":389},{"type":14,"tag":373,"props":479,"children":480},{"style":380},[481],{"type":20,"value":425},{"type":14,"tag":373,"props":483,"children":485},{"class":375,"line":484},5,[486,490,494,499,503],{"type":14,"tag":373,"props":487,"children":488},{"style":380},[489],{"type":20,"value":434},{"type":14,"tag":373,"props":491,"children":492},{"style":386},[493],{"type":20,"value":389},{"type":14,"tag":373,"props":495,"children":496},{"style":380},[497],{"type":20,"value":498},">background:blue;\u003C/",{"type":14,"tag":373,"props":500,"children":501},{"style":386},[502],{"type":20,"value":389},{"type":14,"tag":373,"props":504,"children":505},{"style":380},[506],{"type":20,"value":425},{"type":14,"tag":373,"props":508,"children":510},{"class":375,"line":509},6,[511,516,520],{"type":14,"tag":373,"props":512,"children":513},{"style":380},[514],{"type":20,"value":515},"\u003C/",{"type":14,"tag":373,"props":517,"children":518},{"style":386},[519],{"type":20,"value":389},{"type":14,"tag":373,"props":521,"children":522},{"style":380},[523],{"type":20,"value":425},{"type":14,"tag":28,"props":525,"children":526},{},[527,529,535,537,542,544,549,551,556],{"type":20,"value":528},"如上述情况， ",{"type":14,"tag":67,"props":530,"children":532},{"className":531},[],[533],{"type":20,"value":534},"#basic",{"type":20,"value":536}," 中的第一个 ",{"type":14,"tag":67,"props":538,"children":540},{"className":539},[],[541],{"type":20,"value":389},{"type":20,"value":543}," 设置了 ",{"type":14,"tag":67,"props":545,"children":547},{"className":546},[],[548],{"type":20,"value":83},{"type":20,"value":550},", 其脱离了文档流。因此， 其尺寸不会影响到 ",{"type":14,"tag":67,"props":552,"children":554},{"className":553},[],[555],{"type":20,"value":534},{"type":20,"value":557},"。",{"type":14,"tag":28,"props":559,"children":560},{},[561,563,569,571,577],{"type":20,"value":562},"要使得浮动元素不溢出父容器，可以在父容器创建 ",{"type":14,"tag":67,"props":564,"children":566},{"className":565},[],[567],{"type":20,"value":568},"bfc",{"type":20,"value":570},"。如 ",{"type":14,"tag":67,"props":572,"children":574},{"className":573},[],[575],{"type":20,"value":576},"#bfc",{"type":20,"value":55},{"type":14,"tag":364,"props":579,"children":581},{"className":366,"code":580,"language":72,"meta":5,"style":5},"\u003Cdiv id=\"bfc\" style=\"background: blue; display: flow-root;\">\n  \u003Cdiv style=\"float: left; margin-top: 3px; background: red;\">\n    float: left; margin-top: 3px; background: red;\n  \u003C/div>\n  \u003Cdiv>background:blue; display: flow-root;\u003C/div>\n\u003C/div>\n",[582],{"type":14,"tag":67,"props":583,"children":584},{"__ignoreMap":5},[585,626,653,660,675,699],{"type":14,"tag":373,"props":586,"children":587},{"class":375,"line":376},[588,592,596,600,604,609,613,617,622],{"type":14,"tag":373,"props":589,"children":590},{"style":380},[591],{"type":20,"value":383},{"type":14,"tag":373,"props":593,"children":594},{"style":386},[595],{"type":20,"value":389},{"type":14,"tag":373,"props":597,"children":598},{"style":392},[599],{"type":20,"value":395},{"type":14,"tag":373,"props":601,"children":602},{"style":380},[603],{"type":20,"value":400},{"type":14,"tag":373,"props":605,"children":606},{"style":403},[607],{"type":20,"value":608},"\"bfc\"",{"type":14,"tag":373,"props":610,"children":611},{"style":392},[612],{"type":20,"value":411},{"type":14,"tag":373,"props":614,"children":615},{"style":380},[616],{"type":20,"value":400},{"type":14,"tag":373,"props":618,"children":619},{"style":403},[620],{"type":20,"value":621},"\"background: blue; display: flow-root;\"",{"type":14,"tag":373,"props":623,"children":624},{"style":380},[625],{"type":20,"value":425},{"type":14,"tag":373,"props":627,"children":628},{"class":375,"line":428},[629,633,637,641,645,649],{"type":14,"tag":373,"props":630,"children":631},{"style":380},[632],{"type":20,"value":434},{"type":14,"tag":373,"props":634,"children":635},{"style":386},[636],{"type":20,"value":389},{"type":14,"tag":373,"props":638,"children":639},{"style":392},[640],{"type":20,"value":411},{"type":14,"tag":373,"props":642,"children":643},{"style":380},[644],{"type":20,"value":400},{"type":14,"tag":373,"props":646,"children":647},{"style":403},[648],{"type":20,"value":451},{"type":14,"tag":373,"props":650,"children":651},{"style":380},[652],{"type":20,"value":425},{"type":14,"tag":373,"props":654,"children":655},{"class":375,"line":458},[656],{"type":14,"tag":373,"props":657,"children":658},{"style":380},[659],{"type":20,"value":464},{"type":14,"tag":373,"props":661,"children":662},{"class":375,"line":467},[663,667,671],{"type":14,"tag":373,"props":664,"children":665},{"style":380},[666],{"type":20,"value":473},{"type":14,"tag":373,"props":668,"children":669},{"style":386},[670],{"type":20,"value":389},{"type":14,"tag":373,"props":672,"children":673},{"style":380},[674],{"type":20,"value":425},{"type":14,"tag":373,"props":676,"children":677},{"class":375,"line":484},[678,682,686,691,695],{"type":14,"tag":373,"props":679,"children":680},{"style":380},[681],{"type":20,"value":434},{"type":14,"tag":373,"props":683,"children":684},{"style":386},[685],{"type":20,"value":389},{"type":14,"tag":373,"props":687,"children":688},{"style":380},[689],{"type":20,"value":690},">background:blue; display: flow-root;\u003C/",{"type":14,"tag":373,"props":692,"children":693},{"style":386},[694],{"type":20,"value":389},{"type":14,"tag":373,"props":696,"children":697},{"style":380},[698],{"type":20,"value":425},{"type":14,"tag":373,"props":700,"children":701},{"class":375,"line":509},[702,706,710],{"type":14,"tag":373,"props":703,"children":704},{"style":380},[705],{"type":20,"value":515},{"type":14,"tag":373,"props":707,"children":708},{"style":386},[709],{"type":20,"value":389},{"type":14,"tag":373,"props":711,"children":712},{"style":380},[713],{"type":20,"value":425},{"type":14,"tag":28,"props":715,"children":716},{},[717],{"type":20,"value":718},"其结果如下：",{"type":14,"tag":720,"props":721,"children":729},"iframe",{"src":722,"className":723,"style":728},"/demo/bfc/1",[724,725,726,727],"w-full","border","rounded","p-1","height:290px",[],{"type":14,"tag":358,"props":731,"children":733},{"id":732},"排除外部浮动元素",[734],{"type":20,"value":732},{"type":14,"tag":28,"props":736,"children":737},{},[738,740],{"type":20,"value":739},"上面的解决方案还有一个问题，父容器的另外一个子元素会把浮动元素包含进去。如果需要排除该浮动元素，可以在这个子元素中也创建 ",{"type":14,"tag":32,"props":741,"children":742},{},[743],{"type":20,"value":53},{"type":14,"tag":364,"props":745,"children":747},{"className":366,"code":746,"language":72,"meta":5,"style":5},"\u003Cdiv style=\"display: flow-root; background: blue;\">\n  \u003Cdiv style=\"float: left; margin-top: 10px; background: red;\">\n    float: left; margin-top: 10px; background: red;\n  \u003C/div>\n  \u003Cdiv style=\"background: green;\">child\u003C/div>\n\u003C/div>\n",[748],{"type":14,"tag":67,"props":749,"children":750},{"__ignoreMap":5},[751,779,807,815,830,867],{"type":14,"tag":373,"props":752,"children":753},{"class":375,"line":376},[754,758,762,766,770,775],{"type":14,"tag":373,"props":755,"children":756},{"style":380},[757],{"type":20,"value":383},{"type":14,"tag":373,"props":759,"children":760},{"style":386},[761],{"type":20,"value":389},{"type":14,"tag":373,"props":763,"children":764},{"style":392},[765],{"type":20,"value":411},{"type":14,"tag":373,"props":767,"children":768},{"style":380},[769],{"type":20,"value":400},{"type":14,"tag":373,"props":771,"children":772},{"style":403},[773],{"type":20,"value":774},"\"display: flow-root; background: blue;\"",{"type":14,"tag":373,"props":776,"children":777},{"style":380},[778],{"type":20,"value":425},{"type":14,"tag":373,"props":780,"children":781},{"class":375,"line":428},[782,786,790,794,798,803],{"type":14,"tag":373,"props":783,"children":784},{"style":380},[785],{"type":20,"value":434},{"type":14,"tag":373,"props":787,"children":788},{"style":386},[789],{"type":20,"value":389},{"type":14,"tag":373,"props":791,"children":792},{"style":392},[793],{"type":20,"value":411},{"type":14,"tag":373,"props":795,"children":796},{"style":380},[797],{"type":20,"value":400},{"type":14,"tag":373,"props":799,"children":800},{"style":403},[801],{"type":20,"value":802},"\"float: left; margin-top: 10px; background: red;\"",{"type":14,"tag":373,"props":804,"children":805},{"style":380},[806],{"type":20,"value":425},{"type":14,"tag":373,"props":808,"children":809},{"class":375,"line":458},[810],{"type":14,"tag":373,"props":811,"children":812},{"style":380},[813],{"type":20,"value":814},"    float: left; margin-top: 10px; background: red;\n",{"type":14,"tag":373,"props":816,"children":817},{"class":375,"line":467},[818,822,826],{"type":14,"tag":373,"props":819,"children":820},{"style":380},[821],{"type":20,"value":473},{"type":14,"tag":373,"props":823,"children":824},{"style":386},[825],{"type":20,"value":389},{"type":14,"tag":373,"props":827,"children":828},{"style":380},[829],{"type":20,"value":425},{"type":14,"tag":373,"props":831,"children":832},{"class":375,"line":484},[833,837,841,845,849,854,859,863],{"type":14,"tag":373,"props":834,"children":835},{"style":380},[836],{"type":20,"value":434},{"type":14,"tag":373,"props":838,"children":839},{"style":386},[840],{"type":20,"value":389},{"type":14,"tag":373,"props":842,"children":843},{"style":392},[844],{"type":20,"value":411},{"type":14,"tag":373,"props":846,"children":847},{"style":380},[848],{"type":20,"value":400},{"type":14,"tag":373,"props":850,"children":851},{"style":403},[852],{"type":20,"value":853},"\"background: green;\"",{"type":14,"tag":373,"props":855,"children":856},{"style":380},[857],{"type":20,"value":858},">child\u003C/",{"type":14,"tag":373,"props":860,"children":861},{"style":386},[862],{"type":20,"value":389},{"type":14,"tag":373,"props":864,"children":865},{"style":380},[866],{"type":20,"value":425},{"type":14,"tag":373,"props":868,"children":869},{"class":375,"line":509},[870,874,878],{"type":14,"tag":373,"props":871,"children":872},{"style":380},[873],{"type":20,"value":515},{"type":14,"tag":373,"props":875,"children":876},{"style":386},[877],{"type":20,"value":389},{"type":14,"tag":373,"props":879,"children":880},{"style":380},[881],{"type":20,"value":425},{"type":14,"tag":28,"props":883,"children":884},{},[885],{"type":20,"value":886},"变成：",{"type":14,"tag":364,"props":888,"children":890},{"className":366,"code":889,"language":72,"meta":5,"style":5},"\u003Cdiv style=\"display: flow-root; background: blue;\">\n  \u003Cdiv style=\"float: left; margin-top: 10px; background: red;\">\n    float: left; margin-top: 10px; background: red;\n  \u003C/div>\n  \u003Cdiv style=\"background: green; display: flow-root;\">child\u003C/div>\n\u003C/div>\n",[891],{"type":14,"tag":67,"props":892,"children":893},{"__ignoreMap":5},[894,921,948,955,970,1006],{"type":14,"tag":373,"props":895,"children":896},{"class":375,"line":376},[897,901,905,909,913,917],{"type":14,"tag":373,"props":898,"children":899},{"style":380},[900],{"type":20,"value":383},{"type":14,"tag":373,"props":902,"children":903},{"style":386},[904],{"type":20,"value":389},{"type":14,"tag":373,"props":906,"children":907},{"style":392},[908],{"type":20,"value":411},{"type":14,"tag":373,"props":910,"children":911},{"style":380},[912],{"type":20,"value":400},{"type":14,"tag":373,"props":914,"children":915},{"style":403},[916],{"type":20,"value":774},{"type":14,"tag":373,"props":918,"children":919},{"style":380},[920],{"type":20,"value":425},{"type":14,"tag":373,"props":922,"children":923},{"class":375,"line":428},[924,928,932,936,940,944],{"type":14,"tag":373,"props":925,"children":926},{"style":380},[927],{"type":20,"value":434},{"type":14,"tag":373,"props":929,"children":930},{"style":386},[931],{"type":20,"value":389},{"type":14,"tag":373,"props":933,"children":934},{"style":392},[935],{"type":20,"value":411},{"type":14,"tag":373,"props":937,"children":938},{"style":380},[939],{"type":20,"value":400},{"type":14,"tag":373,"props":941,"children":942},{"style":403},[943],{"type":20,"value":802},{"type":14,"tag":373,"props":945,"children":946},{"style":380},[947],{"type":20,"value":425},{"type":14,"tag":373,"props":949,"children":950},{"class":375,"line":458},[951],{"type":14,"tag":373,"props":952,"children":953},{"style":380},[954],{"type":20,"value":814},{"type":14,"tag":373,"props":956,"children":957},{"class":375,"line":467},[958,962,966],{"type":14,"tag":373,"props":959,"children":960},{"style":380},[961],{"type":20,"value":473},{"type":14,"tag":373,"props":963,"children":964},{"style":386},[965],{"type":20,"value":389},{"type":14,"tag":373,"props":967,"children":968},{"style":380},[969],{"type":20,"value":425},{"type":14,"tag":373,"props":971,"children":972},{"class":375,"line":484},[973,977,981,985,989,994,998,1002],{"type":14,"tag":373,"props":974,"children":975},{"style":380},[976],{"type":20,"value":434},{"type":14,"tag":373,"props":978,"children":979},{"style":386},[980],{"type":20,"value":389},{"type":14,"tag":373,"props":982,"children":983},{"style":392},[984],{"type":20,"value":411},{"type":14,"tag":373,"props":986,"children":987},{"style":380},[988],{"type":20,"value":400},{"type":14,"tag":373,"props":990,"children":991},{"style":403},[992],{"type":20,"value":993},"\"background: green; display: flow-root;\"",{"type":14,"tag":373,"props":995,"children":996},{"style":380},[997],{"type":20,"value":858},{"type":14,"tag":373,"props":999,"children":1000},{"style":386},[1001],{"type":20,"value":389},{"type":14,"tag":373,"props":1003,"children":1004},{"style":380},[1005],{"type":20,"value":425},{"type":14,"tag":373,"props":1007,"children":1008},{"class":375,"line":509},[1009,1013,1017],{"type":14,"tag":373,"props":1010,"children":1011},{"style":380},[1012],{"type":20,"value":515},{"type":14,"tag":373,"props":1014,"children":1015},{"style":386},[1016],{"type":20,"value":389},{"type":14,"tag":373,"props":1018,"children":1019},{"style":380},[1020],{"type":20,"value":425},{"type":14,"tag":28,"props":1022,"children":1023},{},[1024],{"type":20,"value":718},{"type":14,"tag":720,"props":1026,"children":1030},{"src":1027,"className":1028,"style":1029},"/demo/bfc/2",[724,725,726,727],"height:230px",[],{"type":14,"tag":358,"props":1032,"children":1034},{"id":1033},"阻止-margin-重叠",[1035,1037,1043],{"type":20,"value":1036},"阻止 ",{"type":14,"tag":67,"props":1038,"children":1040},{"className":1039},[],[1041],{"type":20,"value":1042},"margin",{"type":20,"value":1044}," 重叠",{"type":14,"tag":28,"props":1046,"children":1047},{},[1048,1050,1055,1057,1061],{"type":20,"value":1049},"在默认情况下，两个相邻元素的",{"type":14,"tag":67,"props":1051,"children":1053},{"className":1052},[],[1054],{"type":20,"value":1042},{"type":20,"value":1056},"会重叠在一起。如果想要阻止该情况，可以用一个具有 ",{"type":14,"tag":32,"props":1058,"children":1059},{},[1060],{"type":20,"value":53},{"type":20,"value":1062}," 的父容器包裹其中一个元素。",{"type":14,"tag":364,"props":1064,"children":1066},{"className":366,"code":1065,"language":72,"meta":5,"style":5},"\u003Csection>\n  \u003Cdiv style=\"background:black;margin:10px;width:88px;height:88px;\">\u003C/div>\n  \u003Cdiv style=\"background:black;margin:10px;width:88px;height:88px;\">\u003C/div>\n\u003C/section>\n",[1067],{"type":14,"tag":67,"props":1068,"children":1069},{"__ignoreMap":5},[1070,1086,1123,1158],{"type":14,"tag":373,"props":1071,"children":1072},{"class":375,"line":376},[1073,1077,1082],{"type":14,"tag":373,"props":1074,"children":1075},{"style":380},[1076],{"type":20,"value":383},{"type":14,"tag":373,"props":1078,"children":1079},{"style":386},[1080],{"type":20,"value":1081},"section",{"type":14,"tag":373,"props":1083,"children":1084},{"style":380},[1085],{"type":20,"value":425},{"type":14,"tag":373,"props":1087,"children":1088},{"class":375,"line":428},[1089,1093,1097,1101,1105,1110,1115,1119],{"type":14,"tag":373,"props":1090,"children":1091},{"style":380},[1092],{"type":20,"value":434},{"type":14,"tag":373,"props":1094,"children":1095},{"style":386},[1096],{"type":20,"value":389},{"type":14,"tag":373,"props":1098,"children":1099},{"style":392},[1100],{"type":20,"value":411},{"type":14,"tag":373,"props":1102,"children":1103},{"style":380},[1104],{"type":20,"value":400},{"type":14,"tag":373,"props":1106,"children":1107},{"style":403},[1108],{"type":20,"value":1109},"\"background:black;margin:10px;width:88px;height:88px;\"",{"type":14,"tag":373,"props":1111,"children":1112},{"style":380},[1113],{"type":20,"value":1114},">\u003C/",{"type":14,"tag":373,"props":1116,"children":1117},{"style":386},[1118],{"type":20,"value":389},{"type":14,"tag":373,"props":1120,"children":1121},{"style":380},[1122],{"type":20,"value":425},{"type":14,"tag":373,"props":1124,"children":1125},{"class":375,"line":458},[1126,1130,1134,1138,1142,1146,1150,1154],{"type":14,"tag":373,"props":1127,"children":1128},{"style":380},[1129],{"type":20,"value":434},{"type":14,"tag":373,"props":1131,"children":1132},{"style":386},[1133],{"type":20,"value":389},{"type":14,"tag":373,"props":1135,"children":1136},{"style":392},[1137],{"type":20,"value":411},{"type":14,"tag":373,"props":1139,"children":1140},{"style":380},[1141],{"type":20,"value":400},{"type":14,"tag":373,"props":1143,"children":1144},{"style":403},[1145],{"type":20,"value":1109},{"type":14,"tag":373,"props":1147,"children":1148},{"style":380},[1149],{"type":20,"value":1114},{"type":14,"tag":373,"props":1151,"children":1152},{"style":386},[1153],{"type":20,"value":389},{"type":14,"tag":373,"props":1155,"children":1156},{"style":380},[1157],{"type":20,"value":425},{"type":14,"tag":373,"props":1159,"children":1160},{"class":375,"line":467},[1161,1165,1169],{"type":14,"tag":373,"props":1162,"children":1163},{"style":380},[1164],{"type":20,"value":515},{"type":14,"tag":373,"props":1166,"children":1167},{"style":386},[1168],{"type":20,"value":1081},{"type":14,"tag":373,"props":1170,"children":1171},{"style":380},[1172],{"type":20,"value":425},{"type":14,"tag":28,"props":1174,"children":1175},{},[1176],{"type":20,"value":1177},"改成",{"type":14,"tag":364,"props":1179,"children":1181},{"className":366,"code":1180,"language":72,"meta":5,"style":5},"\u003Csection>\n  \u003Cdiv style=\"background:black;margin:10px;width:88px;height:88px;\">\u003C/div>\n  \u003Cdiv style=\"display:flow-root;\">\n    \u003Cdiv style=\"background:black;margin:10px;width:88px;height:88px;\">\u003C/div>\n  \u003C/div>\n\u003C/section>\n",[1182],{"type":14,"tag":67,"props":1183,"children":1184},{"__ignoreMap":5},[1185,1200,1235,1263,1299,1314],{"type":14,"tag":373,"props":1186,"children":1187},{"class":375,"line":376},[1188,1192,1196],{"type":14,"tag":373,"props":1189,"children":1190},{"style":380},[1191],{"type":20,"value":383},{"type":14,"tag":373,"props":1193,"children":1194},{"style":386},[1195],{"type":20,"value":1081},{"type":14,"tag":373,"props":1197,"children":1198},{"style":380},[1199],{"type":20,"value":425},{"type":14,"tag":373,"props":1201,"children":1202},{"class":375,"line":428},[1203,1207,1211,1215,1219,1223,1227,1231],{"type":14,"tag":373,"props":1204,"children":1205},{"style":380},[1206],{"type":20,"value":434},{"type":14,"tag":373,"props":1208,"children":1209},{"style":386},[1210],{"type":20,"value":389},{"type":14,"tag":373,"props":1212,"children":1213},{"style":392},[1214],{"type":20,"value":411},{"type":14,"tag":373,"props":1216,"children":1217},{"style":380},[1218],{"type":20,"value":400},{"type":14,"tag":373,"props":1220,"children":1221},{"style":403},[1222],{"type":20,"value":1109},{"type":14,"tag":373,"props":1224,"children":1225},{"style":380},[1226],{"type":20,"value":1114},{"type":14,"tag":373,"props":1228,"children":1229},{"style":386},[1230],{"type":20,"value":389},{"type":14,"tag":373,"props":1232,"children":1233},{"style":380},[1234],{"type":20,"value":425},{"type":14,"tag":373,"props":1236,"children":1237},{"class":375,"line":458},[1238,1242,1246,1250,1254,1259],{"type":14,"tag":373,"props":1239,"children":1240},{"style":380},[1241],{"type":20,"value":434},{"type":14,"tag":373,"props":1243,"children":1244},{"style":386},[1245],{"type":20,"value":389},{"type":14,"tag":373,"props":1247,"children":1248},{"style":392},[1249],{"type":20,"value":411},{"type":14,"tag":373,"props":1251,"children":1252},{"style":380},[1253],{"type":20,"value":400},{"type":14,"tag":373,"props":1255,"children":1256},{"style":403},[1257],{"type":20,"value":1258},"\"display:flow-root;\"",{"type":14,"tag":373,"props":1260,"children":1261},{"style":380},[1262],{"type":20,"value":425},{"type":14,"tag":373,"props":1264,"children":1265},{"class":375,"line":467},[1266,1271,1275,1279,1283,1287,1291,1295],{"type":14,"tag":373,"props":1267,"children":1268},{"style":380},[1269],{"type":20,"value":1270},"    \u003C",{"type":14,"tag":373,"props":1272,"children":1273},{"style":386},[1274],{"type":20,"value":389},{"type":14,"tag":373,"props":1276,"children":1277},{"style":392},[1278],{"type":20,"value":411},{"type":14,"tag":373,"props":1280,"children":1281},{"style":380},[1282],{"type":20,"value":400},{"type":14,"tag":373,"props":1284,"children":1285},{"style":403},[1286],{"type":20,"value":1109},{"type":14,"tag":373,"props":1288,"children":1289},{"style":380},[1290],{"type":20,"value":1114},{"type":14,"tag":373,"props":1292,"children":1293},{"style":386},[1294],{"type":20,"value":389},{"type":14,"tag":373,"props":1296,"children":1297},{"style":380},[1298],{"type":20,"value":425},{"type":14,"tag":373,"props":1300,"children":1301},{"class":375,"line":484},[1302,1306,1310],{"type":14,"tag":373,"props":1303,"children":1304},{"style":380},[1305],{"type":20,"value":473},{"type":14,"tag":373,"props":1307,"children":1308},{"style":386},[1309],{"type":20,"value":389},{"type":14,"tag":373,"props":1311,"children":1312},{"style":380},[1313],{"type":20,"value":425},{"type":14,"tag":373,"props":1315,"children":1316},{"class":375,"line":509},[1317,1321,1325],{"type":14,"tag":373,"props":1318,"children":1319},{"style":380},[1320],{"type":20,"value":515},{"type":14,"tag":373,"props":1322,"children":1323},{"style":386},[1324],{"type":20,"value":1081},{"type":14,"tag":373,"props":1326,"children":1327},{"style":380},[1328],{"type":20,"value":425},{"type":14,"tag":28,"props":1330,"children":1331},{},[1332],{"type":20,"value":718},{"type":14,"tag":720,"props":1334,"children":1337},{"src":1335,"className":1336,"style":1029},"/demo/bfc/3",[724,725,726,727],[],{"type":14,"tag":22,"props":1339,"children":1341},{"id":1340},"关联概念",[1342],{"type":20,"value":1340},{"type":14,"tag":57,"props":1344,"children":1345},{},[1346,1351,1356],{"type":14,"tag":61,"props":1347,"children":1348},{},[1349],{"type":20,"value":1350},"Inline Formatting Context",{"type":14,"tag":61,"props":1352,"children":1353},{},[1354],{"type":20,"value":1355},"Flex Formatting Context",{"type":14,"tag":61,"props":1357,"children":1358},{},[1359],{"type":20,"value":1360},"Grid Formatting Context",{"type":14,"tag":22,"props":1362,"children":1364},{"id":1363},"引用",[1365],{"type":20,"value":1363},{"type":14,"tag":57,"props":1367,"children":1368},{},[1369,1381,1391],{"type":14,"tag":61,"props":1370,"children":1371},{},[1372],{"type":14,"tag":1373,"props":1374,"children":1378},"a",{"href":1375,"rel":1376},"https://developer.mozilla.org/en-US/docs/web/guide/css/block_formatting_context",[1377],"nofollow",[1379],{"type":20,"value":1380},"MDN#block_formatting_context",{"type":14,"tag":61,"props":1382,"children":1383},{},[1384],{"type":14,"tag":1373,"props":1385,"children":1388},{"href":1386,"rel":1387},"https://drafts.csswg.org/css-display/#block-formatting-context",[1377],[1389],{"type":20,"value":1390},"csswg##block-formatting-context",{"type":14,"tag":61,"props":1392,"children":1393},{},[1394],{"type":14,"tag":1373,"props":1395,"children":1398},{"href":1396,"rel":1397},"https://www.w3.org/TR/CSS2/visuren.html#normal-flow",[1377],[1399],{"type":20,"value":1400},"w3c#9.4normal-flow",{"type":14,"tag":1402,"props":1403,"children":1404},"style",{},[1405],{"type":20,"value":1406},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":5,"searchDepth":428,"depth":428,"links":1408},[1409,1410,1416,1417],{"id":24,"depth":428,"text":24},{"id":354,"depth":428,"text":354,"children":1411},[1412,1413,1414],{"id":360,"depth":458,"text":360},{"id":732,"depth":458,"text":732},{"id":1033,"depth":458,"text":1415},"阻止 margin 重叠",{"id":1340,"depth":428,"text":1340},{"id":1363,"depth":428,"text":1363},"markdown","content:bfc.md","bfc.md","md",1780466316514]