{"id":311,"date":"2017-02-04T17:35:09","date_gmt":"2017-02-04T09:35:09","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=311"},"modified":"2017-02-05T12:39:23","modified_gmt":"2017-02-05T04:39:23","slug":"css%e4%b9%8b%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8%e7%9a%84%e5%87%a0%e7%a7%8d%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=311","title":{"rendered":"css\u4e4b\u6e05\u9664\u6d6e\u52a8\u7684\u51e0\u79cd\u65b9\u6cd5"},"content":{"rendered":"

\u5f53\u6211\u4eec\u4f7f\u7528float\u540e,\u53d1\u73b0\u7236\u7ea7\u5143\u7d20\u6ca1\u6709\u88ab\u6491\u5f00\uff0c \u901a\u5e38\u60c5\u51b5\u4e0b\u9700\u8981\u6e05\u9664\u6d6e\u52a8\uff0c\u4ee5\u4e0b\u4ecb\u7ecd\u4e09\u79cd\u6e05\u9664\u6d6e\u52a8\u7684\u65b9\u6cd5\uff1a
\n1. \u4f7f\u7528overflow\uff1ahidden\u5c06\u5143\u7d20\u53d8\u6210BFC\uff0c\u5373\u53ef\u6e05\u9664\u5185\u90e8\u6d6e\u52a8<\/p>\n

<style>\r\n\u00a0 \u00a0 .box{\r\n\u00a0 \u00a0 \u00a0 \u00a0 border: 10px solid #C0A16B;\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: 300px;\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 .child{\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: 100px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 height: 100px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 float: left;\r\n\u00a0 \u00a0 \u00a0 \u00a0 border: 10px solid #AC2925;\r\n\u00a0 \u00a0 }\r\n<\/style>\r\n<body>\r\n\u00a0 \u00a0 <div class=\"box\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"child\"><\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"child\"><\/div>\r\n\u00a0 \u00a0 <\/div>\r\n<\/body><\/pre>\n
.box{\r\n    overflow: hidden;\r\n}<\/pre>\n
\u4e3a\u8fbe\u5230\u6e05\u9664\u5185\u90e8\u6d6e\u52a8\uff0c\u6211\u4eec\u53ef\u4ee5\u89e6\u53d1box\u751f\u6210BFC\uff0c\u90a3\u4e48box\u5728\u8ba1\u7b97\u9ad8\u5ea6\u65f6\uff0cbox\u5185\u90e8\u7684\u6d6e\u52a8\u5143\u7d20child\u4e5f\u4f1a\u53c2\u4e0e\u8ba1\u7b97\u3002<\/p>\n
2 . \u4f2a\u5143\u7d20<\/p>\n
<style>\r\n\u00a0 \u00a0 .clearfix:after{\r\n\u00a0 \u00a0 \u00a0 \u00a0 content: \".\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 display: block;\r\n\u00a0 \u00a0 \u00a0 \u00a0 height: 0;\r\n\u00a0 \u00a0 \u00a0 \u00a0 clear: both;\r\n\u00a0 \u00a0 \u00a0 \u00a0 visibility: hidden;\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 .clearfix{\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: 300px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 border: 10px solid #C0A16B;\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 .child{\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: 100px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 height: 100px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 float: left;\r\n\u00a0 \u00a0 \u00a0 \u00a0 border: 10px solid #AC2925;\r\n\u00a0 \u00a0 }\r\n<\/style>\r\n<body>\r\n\u00a0 \u00a0 <div class=\"clearfix\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"child\"><\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"child\"><\/div>\r\n\u00a0 \u00a0 <\/div>\r\n<\/body><\/pre>\n
\u8fd9\u4e2acss\u7684\u539f\u7406\u662f\u7ecf\u8fc7\u4f7f\u7528after\u4f2a\u5bf9\u8c61,\u5b83\u5c06\u5728\u5e94\u7528clearfix\u7684\u5143\u7d20\u7ed3\u5c3e\u6dfb\u52a0content\u4e2d\u7684\u5185\u5bb9,\u4e5f\u5c31\u662f\u4e00\u4e2a\u201d.\u201d,\u5e76\u4e14\u628a\u4ed6\u8bbe\u7f6e\u4e3a\u5757\u7ea7\u5143\u7d20(display=\u201dblock\u201d);\u9ad8\u5ea6\u8bbe\u7f6e\u4e3a0,clear=\u201dboth\u201d,\u7136\u540e\u5c06\u5176\u5185\u5bb9\u9690\u85cf\u6389(visibility=\u201dhidden\u201d).\u8fd9\u6837\u5c31\u4f1a\u6491\u5f00\u6b64\u5757\u7ea7\u5143\u7d20\u3002
\nie\u4e0b<\/p>\n
.clearfix{\r\n\u00a0 \u00a0 zoom:1;\r\n}<\/pre>\n
3 . \u4f7f\u7528\u7a7a\u6807\u7b7e<\/p>\n
<style>\r\n\u00a0 \u00a0 .box{\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: 300px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 border: 10px solid #C0A16B;\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 .child{\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: 100px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 height: 100px;\r\n\u00a0 \u00a0 \u00a0 \u00a0 float: left;\r\n\u00a0 \u00a0 \u00a0 \u00a0 border: 10px solid #AC2925;\r\n\u00a0 \u00a0 }\r\n<\/style>\r\n<body>\r\n\u00a0 \u00a0 <div class=\"box\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"child\"><\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"child\"><\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div style=\"clear: both;\"><\/div>\r\n\u00a0 \u00a0 <\/div>\r\n<\/body><\/pre>\n
\u5728\u6d6e\u52a8\u6807\u7b7e\u7684\u4e0b\u6dfb\u52a0\u4e00\u4e2a\u7a7a\u7684\u5144\u5f1f\u5143\u7d20\uff0c\u8bbe\u7f6eclear:both<\/code><\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » css\u4e4b\u6e05\u9664\u6d6e\u52a8\u7684\u51e0\u79cd\u65b9\u6cd5<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u5f53\u6211\u4eec\u4f7f\u7528float\u540e,\u53d1\u73b0\u7236\u7ea7\u5143\u7d20\u6ca1\u6709\u88ab\u6491\u5f00\uff0c \u901a\u5e38\u60c5\u51b5\u4e0b\u9700\u8981\u6e05\u9664\u6d6e\u52a8\uff0c\u4ee5\u4e0b\u4ecb\u7ecd\u4e09\u79cd\u6e05\u9664\u6d6e\u52a8\u7684\u65b9\u6cd5\uff1a 1. \u4f7f\u7528overflow\uff1ahidden\u5c06\u5143\u7d20\u53d8\u6210BFC\uff0c\u5373\u53ef\u6e05\u9664\u5185\u90e8\u6d6e\u52a8 <style& […]<\/p>\n","protected":false},"author":1,"featured_media":18,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[28,56],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/311"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=311"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/311\/revisions"}],"predecessor-version":[{"id":312,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/311\/revisions\/312"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/18"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}