{"id":184,"date":"2025-11-25T09:06:50","date_gmt":"2025-11-25T01:06:50","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=184"},"modified":"2025-11-25T09:06:50","modified_gmt":"2025-11-25T01:06:50","slug":"html5%e4%b9%8b%e9%ab%98%e5%ba%a6%e5%a1%8c%e9%99%b7%e9%97%ae%e9%a2%98%e7%9a%84%e8%a7%a3%e5%86%b3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/html5%e4%b9%8b%e9%ab%98%e5%ba%a6%e5%a1%8c%e9%99%b7%e9%97%ae%e9%a2%98%e7%9a%84%e8%a7%a3%e5%86%b3\/","title":{"rendered":"HTML5\u4e4b\u9ad8\u5ea6\u584c\u9677\u95ee\u9898\u7684\u89e3\u51b3"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd <strong>\u6700\u5168 + \u6700\u5b9e\u7528 + \u53ef\u76f4\u63a5\u590d\u5236\u4f7f\u7528<\/strong> \u7684 HTML5 \u9ad8\u5ea6\u584c\u9677\u95ee\u9898\u89e3\u51b3\u65b9\u6848\u6574\u7406\uff0c\u5305\u62ec\u539f\u56e0\u89e3\u6790\u30014 \u79cd\u7ecf\u5178\u89e3\u51b3\u65b9\u5f0f\u3001\u4f7f\u7528\u573a\u666f\u4e0e\u63a8\u8350\u65b9\u6848\u3002\u9002\u5408\u4f60\u6574\u7406\u6210\u6559\u7a0b\u3001\u535a\u5ba2\u6216\u9879\u76ee\u7b14\u8bb0\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfaf \u4ec0\u4e48\u662f\u9ad8\u5ea6\u584c\u9677\uff1f<\/h1>\n\n\n\n<p>\u9ad8\u5ea6\u584c\u9677\u4e00\u822c\u51fa\u73b0\u5728 <strong>\u7236\u5143\u7d20\u5185\u90e8\u7684\u5b50\u5143\u7d20\u91c7\u7528\u6d6e\u52a8\uff08float\uff09\u5e03\u5c40\u65f6<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b50\u5143\u7d20 float left\/right \u540e\u8131\u79bb\u6807\u51c6\u6587\u6863\u6d41<\/li>\n\n\n\n<li>\u7236\u5143\u7d20\u5185\u90e8\u6ca1\u6709\u666e\u901a\u6587\u6863\u6d41\u5143\u7d20<\/li>\n\n\n\n<li>\u7236\u5143\u7d20\u9ad8\u5ea6\u65e0\u6cd5\u88ab\u5185\u5bb9\u6491\u5f00 \u2192 \u89c6\u89c9\u4e0a\u201c\u584c\u9677\u4e3a 0\u201d<\/li>\n<\/ul>\n\n\n\n<p>\u51fa\u73b0\u540e\u5e38\u9020\u6210\u95ee\u9898\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7236\u5143\u7d20\u80cc\u666f\u6d88\u5931<\/li>\n\n\n\n<li>\u7236\u5143\u7d20\u8fb9\u6846\u6d88\u5931<\/li>\n\n\n\n<li>\u5e03\u5c40\u9519\u4e71<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfaf \u5e38\u89c1\u4f8b\u5b50\uff08\u9519\u8bef\u793a\u8303\uff09<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;style&gt;\n  .parent {\n    background: #eee;\n    border: 2px solid #666;\n  }\n  .child {\n    float: left;\n    width: 100px;\n    height: 100px;\n    background: #f66;\n  }\n&amp;lt;\/style&gt;\n\n&amp;lt;div class=&quot;parent&quot;&gt;\n  &amp;lt;div class=&quot;child&quot;&gt;&amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n<\/pre><\/div>\n\n\n<p>\ud83d\udc49 \u7236\u5143\u7d20\u9ad8\u5ea6 0\uff0c\u80cc\u666f\u4e0e\u8fb9\u6846\u770b\u4e0d\u5230\u3002<br>\u89e3\u51b3\u65b9\u6cd5\u770b\u4e0b\u9762\uff01<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 \u65b9\u6cd5 1\uff1aclearfix\uff08\u6e05\u9664\u6d6e\u52a8\uff09\u3010\u6700\u7ecf\u5178\u3001\u6700\u5e38\u7528\u3011<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">CSS\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.clearfix::after {\n  content: &quot;&quot;;\n  display: block;\n  clear: both;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u4f7f\u7528\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div class=&quot;parent clearfix&quot;&gt;\n  &amp;lt;div class=&quot;child&quot;&gt;&amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n<\/pre><\/div>\n\n\n<p>\u4f18\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u517c\u5bb9\u6027\u6781\u597d\uff08IE8+\uff09<\/li>\n\n\n\n<li>\u5e38\u7528\u4e8e\u9875\u9762\u7ed3\u6784\u5e03\u5c40<\/li>\n\n\n\n<li>\u7075\u6d3b\u4e14\u4e0d\u4f1a\u5f71\u54cd\u5176\u5b83\u884c\u4e3a<\/li>\n<\/ul>\n\n\n\n<p>\u63a8\u8350\u6307\u6570\uff1a\u2b50\u2b50\u2b50\u2b50\u2b50\uff08\u6700\u63a8\u8350\uff09<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 \u65b9\u6cd5 2\uff1a\u7236\u5143\u7d20 overflow \u5c5e\u6027\u6491\u5f00\u9ad8\u5ea6<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u5199\u6cd5\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.parent {\n  overflow: hidden; \/* or auto *\/\n}\n\n<\/pre><\/div>\n\n\n<p>\u4f18\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4ee3\u7801\u6700\u5c11<\/li>\n\n\n\n<li>\u7b80\u5355\u5feb\u901f<\/li>\n\n\n\n<li>\u9002\u5408\u65e0\u6eda\u52a8\u573a\u666f<\/li>\n<\/ul>\n\n\n\n<p>\u7f3a\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f1a\u9690\u85cf\u6ea2\u51fa\u7684\u5b50\u5143\u7d20\u5185\u5bb9<\/li>\n<\/ul>\n\n\n\n<p>\u9002\u7528\u573a\u666f\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e0d\u9700\u8981\u663e\u793a\u6ea2\u51fa\u5185\u5bb9<\/li>\n\n\n\n<li>\u7b80\u5355\u5361\u7247\u3001\u5e03\u5c40\u5c0f\u6a21\u5757<\/li>\n<\/ul>\n\n\n\n<p>\u63a8\u8350\u6307\u6570\uff1a\u2b50\u2b50\u2b50\u2b50<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 \u65b9\u6cd5 3\uff1a\u7236\u5143\u7d20\u4f7f\u7528\u6d6e\u52a8\uff08float\uff09<\/h1>\n\n\n\n<p>\u8ba9\u7236\u5143\u7d20\u4e5f float\uff0c\u5b83\u81ea\u7136\u4f1a\u88ab\u5185\u90e8\u5b50\u5143\u7d20\u6491\u8d77\u6765\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.parent {\n  float: left;\n}\n\n<\/pre><\/div>\n\n\n<p>\u7f3a\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f1a\u5f71\u54cd\u5e03\u5c40<\/li>\n\n\n\n<li>\u7236\u5143\u7d20\u81ea\u5df1\u9700\u8981\u88ab\u6e05\u9664\u6d6e\u52a8<br>\u2192 \u4e0d\u63a8\u8350\u505a\u901a\u7528\u65b9\u6848<\/li>\n<\/ul>\n\n\n\n<p>\u63a8\u8350\u6307\u6570\uff1a\u2b50\u2b50<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 \u65b9\u6cd5 4\uff1a\u7236\u5143\u7d20\u6dfb\u52a0 display: flow-root\uff08\u73b0\u4ee3\u6d4f\u89c8\u5668\u6700\u4f18\u96c5\uff09<\/h1>\n\n\n\n<p>CSS \u65b0\u89c4\u8303\u4e2d\u7684\u89e3\u51b3\u65b9\u6848\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.parent {\n  display: flow-root;\n}\n\n<\/pre><\/div>\n\n\n<p>\u6548\u679c\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u81ea\u52a8\u5f62\u6210\u65b0\u7684 BFC\uff08\u5757\u7ea7\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587\uff09<\/li>\n\n\n\n<li>\u76f4\u63a5\u89e3\u51b3\u6d6e\u52a8\u584c\u9677\u95ee\u9898<\/li>\n<\/ul>\n\n\n\n<p>\u4f18\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6700\u7b80\u6d01\u3001\u8bed\u4e49\u597d<\/li>\n\n\n\n<li>\u73b0\u4ee3\u6d4f\u89c8\u5668\u517c\u5bb9\u4f18\u79c0\uff08IE \u4e0d\u652f\u6301\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u9002\u7528\u573a\u666f\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e0d\u9700\u8981\u517c\u5bb9 IE \u7684\u9879\u76ee<\/li>\n\n\n\n<li>\u79fb\u52a8\u7aef H5 \u9879\u76ee \u2192 \u5f3a\u70c8\u63a8\u8350<\/li>\n<\/ul>\n\n\n\n<p>\u63a8\u8350\u6307\u6570\uff1a\u2b50\u2b50\u2b50\u2b50\u2b50\uff08\u79fb\u52a8\u7aef\u6700\u4f73\uff09<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udd25 \u65b9\u6cd5 5\uff1a\u521b\u5efa BFC\uff08\u89e6\u53d1\u5757\u7ea7\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587\uff09<\/h1>\n\n\n\n<p>\u89e6\u53d1 BFC \u7684\u5143\u7d20\u53ef\u4ee5\u81ea\u52a8\u5305\u542b\u6d6e\u52a8\u5143\u7d20\u3002<\/p>\n\n\n\n<p>\u89e6\u53d1 BFC \u7684\u65b9\u5f0f\u5305\u62ec\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* \u4efb\u610f\u4ee5\u4e0b\u4e4b\u4e00\u5373\u53ef *\/\n.parent { overflow: hidden; }\n.parent { overflow: auto; }\n.parent { display: inline-block; }\n.parent { float: left; }\n.parent { position: absolute; }\n.parent { position: fixed; }\n.parent { display: flow-root; }\n\n<\/pre><\/div>\n\n\n<p>\u5176\u4e2d\u6700\u5e72\u51c0\u7684\u65b9\u5f0f\u5c31\u662f <code>flow-root<\/code>\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udccc \u56db\u79cd\u65b9\u6cd5\u5bf9\u6bd4\u603b\u7ed3<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u65b9\u6cd5<\/th><th>\u4f18\u70b9<\/th><th>\u7f3a\u70b9<\/th><th>\u517c\u5bb9\u6027<\/th><\/tr><\/thead><tbody><tr><td>clearfix<\/td><td>\u7a33\u5b9a\u901a\u7528<\/td><td>\u9700\u989d\u5916\u7c7b\u540d<\/td><td>IE8+ \u4f18\u79c0<\/td><\/tr><tr><td>overflow:hidden<\/td><td>\u7b80\u5355\u597d\u7528<\/td><td>\u4f1a\u9690\u85cf\u6ea2\u51fa\u5185\u5bb9<\/td><td>\u975e\u5e38\u597d<\/td><\/tr><tr><td>\u7236\u5143\u7d20\u4e5f float<\/td><td>\u4f1a\u88ab\u6491\u5f00<\/td><td>\u5e03\u5c40\u4f1a\u6df7\u4e71<\/td><td>\u597d<\/td><\/tr><tr><td>display:flow-root<\/td><td>\u6700\u73b0\u4ee3\u6700\u4f18\u96c5<\/td><td>IE \u4e0d\u652f\u6301<\/td><td>\u79fb\u52a8\u7aef\u63a8\u8350<\/td><\/tr><tr><td>BFC\uff08\u5404\u65b9\u5f0f\uff09<\/td><td>\u7075\u6d3b<\/td><td>\u6709\u65f6\u5f71\u54cd\u5e03\u5c40<\/td><td>\u53d6\u51b3\u4e8e\u89e6\u53d1\u65b9\u5f0f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83e\udde9 \u63a8\u8350\u65b9\u6848\uff08\u6309\u573a\u666f\uff09<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 PC \u9875\u9762 + \u517c\u5bb9 IE<\/h3>\n\n\n\n<p>\ud83d\udc49 \u4f7f\u7528 <strong>clearfix<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.clearfix::after { content: &quot;&quot;; display: block; clear: both; }\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u79fb\u52a8\u7aef H5\u3001WebApp\u3001\u5c0f\u7a0b\u5e8f<\/h3>\n\n\n\n<p>\ud83d\udc49 \u4f7f\u7528 <strong>display: flow-root<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.parent { display: flow-root; }\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u7b80\u5355\u5361\u7247\uff08\u65e0\u6ea2\u51fa\u5185\u5bb9\uff09<\/h3>\n\n\n\n<p>\ud83d\udc49 \u4f7f\u7528 overflow<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.parent { overflow: hidden; }\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u6700\u5168 + \u6700\u5b9e\u7528 + \u53ef\u76f4\u63a5\u590d\u5236\u4f7f\u7528 \u7684 HTML5 \u9ad8\u5ea6\u584c\u9677\u95ee\u9898&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/html5%e4%b9%8b%e9%ab%98%e5%ba%a6%e5%a1%8c%e9%99%b7%e9%97%ae%e9%a2%98%e7%9a%84%e8%a7%a3%e5%86%b3\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-184","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/184\/revisions"}],"predecessor-version":[{"id":185,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/184\/revisions\/185"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}