{"id":164,"date":"2023-06-11T19:02:55","date_gmt":"2023-06-11T11:02:55","guid":{"rendered":"https:\/\/www.qzdd.net\/?p=164"},"modified":"2023-06-11T19:02:55","modified_gmt":"2023-06-11T11:02:55","slug":"bfc","status":"publish","type":"post","link":"https:\/\/www.qzdd.net\/?p=164","title":{"rendered":"BFC"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">BFC\u6982\u5ff5<\/h2>\n\n\n\n<p>BFC\u5168\u79f0\uff1a<mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\">Block Formatting Context<\/mark>, \u5757\u7ea7\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587<\/p>\n\n\n\n<p>BFC\u5f62\u6210\u4e00\u4e2a\u5b8c\u5168\u72ec\u7acb\u7684\u5bb9\u5668\uff0c\u5bb9\u5668\u91cc\u7684\u5143\u7d20\u4e0d\u7ba1\u5982\u4f55\u5e03\u5c40\u90fd\u4e0d\u4f1a\u5f71\u54cd\u5bb9\u5668\u5916\u90e8<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5982\u4f55\u89e6\u53d1BFC<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6839\u5143\u7d20\uff08<code>&lt;html&gt;<\/code>\uff09<\/li>\n\n\n\n<li>\u6d6e\u52a8\u5143\u7d20\uff08<code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\">float<\/mark><\/code>&nbsp;\u503c\u4e0d\u4e3a&nbsp;<code>none<\/code>\uff09<\/li>\n\n\n\n<li>\u7edd\u5bf9\u5b9a\u4f4d\u5143\u7d20\uff08<code>position<\/code>&nbsp;\u503c\u4e3a&nbsp;<code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\">absolute<\/mark><\/code>&nbsp;\u6216&nbsp;<code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\">fixed<\/mark><\/code>\uff09<\/li>\n\n\n\n<li>\u884c\u5185\u5757\u5143\u7d20\uff08<code>display<\/code>&nbsp;\u503c\u4e3a&nbsp;<code>inline-block<\/code>\uff09<\/li>\n\n\n\n<li>\u8868\u683c\u5355\u5143\u683c\uff08<code>display<\/code>&nbsp;\u503c\u4e3a&nbsp;<code>table-cell<\/code>\uff0cHTML \u8868\u683c\u5355\u5143\u683c\u9ed8\u8ba4\u503c\uff09<\/li>\n\n\n\n<li>\u8868\u683c\u6807\u9898\uff08<code>display<\/code>&nbsp;\u503c\u4e3a&nbsp;<code>table-caption<\/code>\uff0cHTML \u8868\u683c\u6807\u9898\u9ed8\u8ba4\u503c\uff09<\/li>\n\n\n\n<li>\u533f\u540d\u8868\u683c\u5355\u5143\u683c\u5143\u7d20\uff08<code>display<\/code>&nbsp;\u503c\u4e3a&nbsp;<code>table<\/code>\u3001<code>table-row<\/code>\u3001&nbsp;<code>table-row-group<\/code>\u3001<code>table-header-group<\/code>\u3001<code>table-footer-group<\/code>\uff08\u5206\u522b\u662f HTML table\u3001tr\u3001tbody\u3001thead\u3001tfoot \u7684\u9ed8\u8ba4\u503c\uff09\u6216&nbsp;<code>inline-table<\/code>\uff09<\/li>\n\n\n\n<li><code>overflow<\/code>&nbsp;\u503c<mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\">\u4e0d\u4e3a&nbsp;<code>visible<\/code>\u3001<code>clip<\/code>&nbsp;<\/mark>\u7684\u5757\u5143\u7d20<\/li>\n\n\n\n<li><code>display<\/code>&nbsp;\u503c\u4e3a&nbsp;<code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\">flow-root<\/mark><\/code>&nbsp;\u7684\u5143\u7d20<\/li>\n\n\n\n<li><code>contain<\/code>&nbsp;\u503c\u4e3a&nbsp;<code>layout<\/code>\u3001<code>content<\/code>&nbsp;\u6216&nbsp;<code>paint<\/code>&nbsp;\u7684\u5143\u7d20<\/li>\n\n\n\n<li>\u5f39\u6027\u5143\u7d20\uff08<code>display<\/code>&nbsp;\u503c\u4e3a&nbsp;<code>flex<\/code>&nbsp;\u6216&nbsp;<code>inline-flex<\/code>&nbsp;\u5143\u7d20\u7684\u76f4\u63a5\u5b50\u5143\u7d20\uff09\uff0c\u5982\u679c\u5b83\u4eec\u672c\u8eab\u65e2\u4e0d\u662f&nbsp;<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Glossary\/Flex_Container\">flex<\/a>\u3001<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Glossary\/Grid_Container\">grid<\/a>&nbsp;\u4e5f\u4e0d\u662f&nbsp;<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/CSS_table\">table<\/a>&nbsp;\u5bb9\u5668<\/li>\n\n\n\n<li>\u7f51\u683c\u5143\u7d20\uff08<code>display<\/code>&nbsp;\u503c\u4e3a&nbsp;<code>grid<\/code>&nbsp;\u6216&nbsp;<code>inline-grid<\/code>&nbsp;\u5143\u7d20\u7684\u76f4\u63a5\u5b50\u5143\u7d20\uff09\uff0c\u5982\u679c\u5b83\u4eec\u672c\u8eab\u65e2\u4e0d\u662f&nbsp;<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Glossary\/Flex_Container\">flex<\/a>\u3001<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Glossary\/Grid_Container\">grid<\/a>&nbsp;\u4e5f\u4e0d\u662f&nbsp;<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/CSS_table\">table<\/a>&nbsp;\u5bb9\u5668<\/li>\n\n\n\n<li>\u591a\u5217\u5bb9\u5668\uff08<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/column-count\"><code>column-count<\/code><\/a>&nbsp;\u6216&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/column-width\"><code>column-width<\/code>&nbsp;<small>(en-US)<\/small><\/a>&nbsp;\u503c\u4e0d\u4e3a&nbsp;<code>auto<\/code>\uff0c\u5305\u62ec<code>column-count<\/code>&nbsp;\u4e3a&nbsp;<code>1<\/code>\uff09<\/li>\n\n\n\n<li><code>column-span<\/code>&nbsp;\u503c\u4e3a&nbsp;<code>all<\/code>&nbsp;\u7684\u5143\u7d20\u59cb\u7ec8\u4f1a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 BFC\uff0c\u5373\u4f7f\u8be5\u5143\u7d20\u6ca1\u6709\u5305\u88f9\u5728\u4e00\u4e2a\u591a\u5217\u5bb9\u5668\u4e2d (<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/commit\/a8634b96900279916bd6c505fda88dda71d8ec51\" target=\"_blank\" rel=\"noreferrer noopener\">\u89c4\u8303\u53d8\u66f4<\/a>,&nbsp;<a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=709362\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome bug<\/a>)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">BFC\u89c4\u5219<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5305\u542b\u5185\u90e8\u6d6e\u52a8\uff0c\u6d6e\u52a8\u53c2\u4e0e\u9ad8\u5ea6\u8ba1\u7b97<\/li>\n\n\n\n<li>\u6392\u9664\u5916\u90e8\u6d6e\u52a8<\/li>\n\n\n\n<li>\u963b\u6b62margin\u91cd\u53e0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">BFC\u5e94\u7528<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9632\u6b62\u6d6e\u52a8\u5bfc\u81f4\u7236\u5143\u7d20\u9ad8\u5ea6\u584c\u9677\uff08\u7b49\u540c\u7236\u5143\u7d20\u6dfb\u52a0clearfix\u4f2a\u5143\u7d20\uff09<\/li>\n\n\n\n<li>\u963b\u6b62margin\u91cd\u53e0\uff0c\u963b\u6b62\u5b50\u5143\u7d20margin-top,margin-bottom\u6ea2\u51fa(\u7236\u5143\u7d20\u6709padding\/border\u4e0d\u4f1a\u6ea2\u51fa)\uff08clearfix\u65e0\u6cd5\u963b\u6b62\u6ea2\u51fa\uff09,\u4ece\u800c\u963b\u6b62\u4e86\u5b50\u5143\u7d20\u548c\u5916\u90e8\u5143\u7d20\u7684margin\u91cd\u53e0<\/li>\n\n\n\n<li>\u4e24\u680f\u5e03\u5c40-float\u5143\u7d20\u4f1a\u906e\u76d6\u5144\u5f1f\u5143\u7d20(\u5176\u4e2d\u7684\u6587\u672c\u4e0d\u4f1a)\uff0c\u5144\u5f1f\u5143\u7d20\u521b\u5efa\u4e00\u4e2aBFC\u5373\u53ef\u963b\u6b62\u906e\u76d6\uff0c\u5f62\u6210\u4e24\u680f\u5e03\u5c40<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>BFC\u6982\u5ff5 BFC\u5168\u79f0\uff1aBlock Formatting Context, \u5757\u7ea7\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587 BFC\u5f62\u6210\u4e00\u4e2a\u5b8c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[31,84],"class_list":["post-164","post","type-post","status-publish","format-standard","hentry","category-base","tag-bfc","tag-84"],"_links":{"self":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=164"}],"version-history":[{"count":0,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/164\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}