docs__myblog__css__bfc.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[30],{h2kI:function(e,n,l){"use strict";l.r(n);var t=l("q1tI"),a=l.n(t),c=l("dEAq"),i=l("H1Ra"),r=a.a.memo((e=>{e.demos;return a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:"markdown"},a.a.createElement("h2",{id:"bfc-\u7684\u5b9a\u4e49"},a.a.createElement(c["AnchorLink"],{to:"#bfc-\u7684\u5b9a\u4e49","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"BFC \u7684\u5b9a\u4e49"),a.a.createElement("blockquote",null,a.a.createElement("p",null,'BFC(Block formatting context)\u76f4\u8bd1\u4e3a"\u5757\u7ea7\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587"\u3002\u5b83\u662f\u4e00\u4e2a\u72ec\u7acb\u7684\u6e32\u67d3\u533a\u57df\uff0c\u53ea\u6709 Block-level box \u53c2\u4e0e\uff0c \u5b83\u89c4\u5b9a\u4e86\u5185\u90e8\u7684 Block-level Box \u5982\u4f55\u5e03\u5c40\uff0c\u5e76\u4e14\u4e0e\u8fd9\u4e2a\u533a\u57df\u5916\u90e8\u6beb\u4e0d\u76f8\u5e72')),a.a.createElement("h2",{id:"bfc-\u57fa\u672c\u5355\u4f4d\u7ec4\u6210"},a.a.createElement(c["AnchorLink"],{to:"#bfc-\u57fa\u672c\u5355\u4f4d\u7ec4\u6210","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"BFC \u57fa\u672c\u5355\u4f4d\u7ec4\u6210"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"Box: css \u5e03\u5c40\u7684\u57fa\u672c\u5355\u4f4d"),a.a.createElement("p",null,"Box \u662f css \u5e03\u5c40\u7684\u5bf9\u8c61\u548c\u57fa\u672c\u5355\u4f4d\uff0c\u76f4\u89c2\u7684\u6765\u8bb2\uff0c\u5c31\u662f\u4e00\u4e2a\u9875\u9762\u662f\u7531\u5f88\u591a\u4e2a Box \u7ec4\u6210\u7684\uff0c\u5143\u7d20\u7684\u7c7b\u578b\u548c display \u5c5e\u6027\u51b3\u5b9a\u4e86\u8fd9\u4e2a Box \u7684\u7c7b\u578b\uff0c\u4e0d\u540c\u7c7b\u578b\u7684 Box,\u4f1a\u53c2\u4e0e\u4e0d\u540c\u7684 Formatting Context\uff08\u4e00\u4e2a\u51b3\u5b9a\u5982\u4f55\u6e32\u67d3\u6587\u6863\u7684\u5bb9\u5668\uff09\uff0c\u56e0\u6b64 Box \u7684\u5143\u7d20\u4f1a\u4ee5\u4e0d\u540c\u7684\u65b9\u5f0f\u6e32\u67d3"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"block-level box:display \u5c5e\u6027\u4e3a block, list-item, table \u7684\u5143\u7d20\uff0c\u4f1a\u751f\u6210 block-level box\u3002\u5e76\u4e14\u53c2\u4e0e block fomatting context\uff1b")),a.a.createElement("li",null,a.a.createElement("p",null,"inline-level box:display \u5c5e\u6027\u4e3a inline, inline-block, inline-table \u7684\u5143\u7d20\uff0c\u4f1a\u751f\u6210 inline-level box\u3002\u5e76\u4e14\u53c2\u4e0e inline formatting context\uff1b")))),a.a.createElement("li",null,a.a.createElement("p",null,"Formatting Context \u662f W3c css2.1 \u89c4\u8303\u4e2d\u7684\u4e00\u4e2a\u6982\u5ff5\uff0c\u4ed6\u662f\u9875\u9762\u4e2d\u7684\u4e00\u5757\u6e32\u67d3\u533a\u57df\uff0c\u5e76\u4e14\u6709\u4e00\u5957\u6e32\u67d3\u89c4\u5219\uff0c\u4ed6\u51b3\u5b9a\u4e86\u5176\u5b50\u5143\u7d20\u5982\u4f55\u5b9a\u4f4d\u4ee5\u53ca\u548c\u5176\u4ed6\u5143\u7d20\u7684\u5173\u7cfb\u548c\u76f8\u4e92\u4f5c\u7528\uff0c\u6700\u5e38\u89c1\u7684\u6709 BFC \u548c IFC"))),a.a.createElement("h2",{id:"\u54ea\u4e9b\u56e0\u7d20\u4f1a\u751f\u6210-bfc-\u5462"},a.a.createElement(c["AnchorLink"],{to:"#\u54ea\u4e9b\u56e0\u7d20\u4f1a\u751f\u6210-bfc-\u5462","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u54ea\u4e9b\u56e0\u7d20\u4f1a\u751f\u6210 BFC \u5462\uff1f"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u6839\u5143\u7d20")),a.a.createElement("li",null,a.a.createElement("p",null,"float \u7684\u503c\u4e0d\u662f none\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,"position \u7684\u503c\u662f absolute \u6216\u8005 fixed\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,"display \u7684\u503c\u662f inline-block\u3001table-cell\u3001flex\u3001table-caption \u6216\u8005 inline-flex")),a.a.createElement("li",null,a.a.createElement("p",null,"overflow \u7684\u503c\u4e0d\u662f visible"))),a.a.createElement("h2",{id:"bfc-\u5e03\u5c40\u89c4\u5219"},a.a.createElement(c["AnchorLink"],{to:"#bfc-\u5e03\u5c40\u89c4\u5219","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"BFC \u5e03\u5c40\u89c4\u5219"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"\u5185\u90e8\u7684 Box \u4f1a\u5728\u5782\u76f4\u65b9\u5411\uff0c\u4e00\u4e2a\u63a5\u4e00\u4e2a\u5730\u653e\u7f6e\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,"Box \u5782\u76f4\u65b9\u5411\u7684\u8ddd\u79bb\u7531 margin \u51b3\u5b9a\u3002\u5c5e\u4e8e\u540c\u4e00\u4e2a BFC \u7684\u4e24\u4e2a\u76f8\u90bb Box \u7684 margin \u4f1a\u53d1\u751f\u91cd\u53e0")),a.a.createElement("li",null,a.a.createElement("p",null,"\u6bcf\u4e2a\u5143\u7d20\u7684 margin box \u7684\u5de6\u8fb9\uff0c\u4e0e\u5305\u542b\u5757 border box \u7684\u5de6\u8fb9\u76f8\u63a5\u89e6\uff08\u5bf9\u4e8e\u4ece\u5de6\u5f80\u53f3\u7684\u683c\u5f0f\u5316\uff0c\u5426\u5219\u76f8\u53cd\uff09\uff0c\u5373\u4f7f\u5b58\u5728\u6d6e\u52a8\u4e5f\u662f\u5982\u6b64")),a.a.createElement("li",null,a.a.createElement("p",null,"BFC \u7684\u533a\u57df\u4e0d\u4f1a\u4e0e float box \u91cd\u53e0")),a.a.createElement("li",null,a.a.createElement("p",null,"BFC \u5c31\u662f\u9875\u9762\u4e0a\u7684\u4e00\u4e2a\u9694\u79bb\u7684\u72ec\u7acb\u5bb9\u5668\uff0c\u5bb9\u5668\u91cc\u9762\u7684\u5b50\u5143\u7d20\u4e0d\u4f1a\u5f71\u54cd\u5230\u5916\u9762\u7684\u5143\u7d20\u3002\u53cd\u4e4b\u4e5f\u5982\u6b64\u3002")),a.a.createElement("li",null,a.a.createElement("p",null,"\u8ba1\u7b97 BFC \u7684\u9ad8\u5ea6\u65f6\uff0c\u6d6e\u52a8\u5143\u7d20\u4e5f\u53c2\u4e0e\u8ba1\u7b97"))),a.a.createElement("h2",{id:"\u5229\u7528-bfc-\u80fd\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898\u5462"},a.a.createElement(c["AnchorLink"],{to:"#\u5229\u7528-bfc-\u80fd\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898\u5462","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u5229\u7528 BFC \u80fd\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898\u5462\uff1f"),a.a.createElement("h3",{id:"1-\u89e3\u51b3\u5782\u76f4\u76d2\u5b50-margin-\u91cd\u53e0\u7684\u95ee\u9898"},a.a.createElement(c["AnchorLink"],{to:"#1-\u89e3\u51b3\u5782\u76f4\u76d2\u5b50-margin-\u91cd\u53e0\u7684\u95ee\u9898","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"1. \u89e3\u51b3\u5782\u76f4\u76d2\u5b50 margin \u91cd\u53e0\u7684\u95ee\u9898\uff1f"),a.a.createElement(i["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Document</title>\n    <style type="text/css">\n      .par {\n        width: 400px;\n        /* height: 300px; */\n        background: brown;\n        overflow: hidden;\n      }\n      .child {\n        width: 150px;\n        height: 300px;\n        background: chartreuse;\n        /* float: left; */\n        margin: 100px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class="par">\n      <div class="child"></div>\n      <div class="child"></div>\n    </div>\n  </body>\n</html>',lang:"html"}),a.a.createElement("p",null,"\u6548\u679c\u5982\u56fe\u6240\u793a\uff1a"),a.a.createElement("img",{src:l("twMS")}),a.a.createElement("p",null,"\u4e0a\u8ff0\u4ee3\u7801\u4e24\u4e2a child \u76d2\u5b50\u4e4b\u95f4\u7684\u8ddd\u79bb\u662f\u591a\u5c11\u5462\uff1f\u7b54\u6848\u662f 200 \u5417\uff1f\u9519\u8bef\uff01\u6709\u4eba\u8bf4\u4e3a\u4ec0\u4e48\u4e0d\u662f 200 \u5462\uff0c\u4f60\u770b\u7b2c\u4e00\u4e2a\u76d2\u5b50\u4e0b\u8fb9\u8ddd\u662f 100\uff0c\u7b2c\u4e8c\u4e2a\u76d2\u5b50\u7684\u4e0a\u8fb9\u8ddd\u662f 100\uff0c\u90a3\u52a0\u8d77\u6765\u5e94\u8be5\u662f 200 \u554a\uff0c\u522b\u7684\u4e0d\u4f1a\u7b97\u6570\u52a0\u6cd5\u8fd9\u8fd8\u80fd\u51fa\u9519\uff1f\u5176\u5b9e\u4e0d\u662f\u8fd9\u6837\u7684\uff0c\u56e0\u4e3a\u4e24\u4e2a\u5782\u76f4\u7684\u76d2\u5b50\u4e4b\u95f4\u7684 margin \u95f4\u8ddd\u4e0a\u4e0b\u91cd\u53e0\u4e86\uff0c\u6240\u4ee5\u53d6\u6700\u5927\u503c\u5c31\u662f 100\uff0c\u65e2\u4e24\u4e2a\u76d2\u5b50\u7684\u8ddd\u79bb\u662f 100\uff0c\u90a3\u600e\u4e48\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u5462\uff1f\uff0c\u90a3\u5c31\u8981\u7528\u5230 BFC \u4e86"),a.a.createElement("p",null,a.a.createElement("strong",null,"\u91cd\u53e0\u7684\u8ba1\u7b97\u6cd5\u5219\u662f\uff1a")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("ol",null,a.a.createElement("li",null,"\u5168\u90e8\u90fd\u4e3a\u6b63\u503c\uff0c\u53d6\u6700\u5927\u8005"))),a.a.createElement("li",null,a.a.createElement("ol",{start:2},a.a.createElement("li",null,"\u4e0d\u5168\u662f\u6b63\u503c\uff0c\u5219\u90fd\u53d6\u7edd\u5bf9\u503c\uff0c\u7136\u540e\u7528\u6b63\u503c\u51cf\u53bb\u6700\u5927\u503c"))),a.a.createElement("li",null,a.a.createElement("ol",{start:3},a.a.createElement("li",null,"\u6ca1\u6709\u6b63\u503c\uff0c\u5219\u90fd\u53d6\u7edd\u5bf9\u503c\uff0c\u7136\u540e\u7528 0 \u51cf\u53bb\u6700\u5927\u503c")))),a.a.createElement("p",null,"\u4e0b\u9762\u662f\u89e3\u51b3 margin \u91cd\u53e0\u7684\u65b9\u6cd5\uff0c\u4f7f\u7528\u4e00\u4e2a BFC \u7684\u76d2\u5b50\u628a\u4e00\u4e2a child \u5305\u88f9\u8d77\u6765\uff0c\u8fd9\u6837\u4e24\u4e2a\u76d2\u5b50\u5c31\u662f\u5c5e\u4e8e\u4e0d\u540c\u7684 BFC,\u90a3\u5c31\u4e0d\u4f1a\u53d1\u751f\u91cd\u53e0\u4e86"),a.a.createElement(i["a"],{code:'<body>\n  <div class="par">\n    <div style="overflow:hidden"><div class="child"></div><div>\n    <div class="child"></div>\n  </div>\n</body>',lang:"html"}),a.a.createElement("p",null,"\u6548\u679c\u5982\u56fe\u6240\u793a\uff1a"),a.a.createElement("img",{src:l("vNlG")}),a.a.createElement("h3",{id:"2-\u6e05\u9664\u5185\u90e8\u6d6e\u52a8"},a.a.createElement(c["AnchorLink"],{to:"#2-\u6e05\u9664\u5185\u90e8\u6d6e\u52a8","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"2. \u6e05\u9664\u5185\u90e8\u6d6e\u52a8\uff1f"),a.a.createElement("p",null,"\u6709\u7684\u4eba\u4f1a\u60f3\uff0c\u4e3a\u4ec0\u4e48",a.a.createElement("code",null,"overflow:hidden"),"\u53ef\u4ee5\u6e05\u695a\u6d6e\u52a8\u5462\uff1f\u8bf4\u5b9e\u8bdd\u6211\u4e4b\u524d\u4e5f\u4e0d\u662f\u5230\u5e95\u662f\u4e3a\u4ec0\u4e48\uff1f\u53ea\u662f\u770b\u8fd9\u6837\u89e3\u51b3\u5c31\u4e00\u76f4\u8fd9\u6837\u5199\uff0c\u73b0\u5728\u5b66\u4e86 BFC \u624d\u77e5\u9053\u539f\u56e0\uff0c\u8ba1\u7b97\u9ad8\u5ea6\u7684\u65f6\u5019\u6d6e\u52a8\u5143\u7d20\u4e5f\u53c2\u52a0\uff0c\u6240\u4ee5\u76d2\u5b50\u5916\u9762\u52a0\u4e86",a.a.createElement("code",null,"overflo:hidden"),"\u9ad8\u5ea6\u5c31\u51fa\u6765\u4e86"),a.a.createElement("p",null,"\u8fd9\u662f\u4e00\u4e2a\u5916\u90e8\u7684\u76d2\u5b50\u80cc\u666f\u6ca1\u6709\u9ad8\u5ea6\u6700\u540e\u51fa\u73b0\u9ad8\u5ea6\u7684\u4f8b\u5b50\uff1a"),a.a.createElement(i["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Document</title>\n    <style type="text/css">\n      .par {\n        width: 400px;\n        /* height: 300px; */\n        background: brown;\n        overflow: hidden; //\u4f7fpar\u76d2\u5b50\u53d8\u6210\u4e86BFC\n      }\n      .child {\n        width: 150px;\n        height: 300px;\n        background: chartreuse;\n        float: left;\n        margin: 100px;\n      }\n    </style>\n  </head>\n  <body>\n    <div class="par">\n      <div class="child"></div>\n      <div class="child"></div>\n    </div>\n  </body>\n</html>',lang:"html"})))}));n["default"]=e=>{var n=a.a.useContext(c["context"]),l=n.demos;return a.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),a.a.createElement(r,{demos:l})}},twMS:function(e,n,l){e.exports=l.p+"static/margin\u91cd\u53e0.12bbf4b5.png"},vNlG:function(e,n,l){e.exports=l.p+"static/BFC\u89e3\u51b3margin\u91cd\u53e0.ba9f6962.png"}}]);