列表

详情


CSS4. 浮动

描述

 浮动盒子可以向左、右移动,直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离常规文档流,所以文档流中的元素几乎认为浮动盒子不存在。
 现在给"body"标签设置宽度为300px,再给类名为"left"、"center"、"right"的盒子(左、中、右盒子)皆设置宽度、高度且都为100px,三个盒子的颜色可以自定义以便于观测。继续给中间盒子设置"float: left"属性,此时中间盒子已经是一个浮动盒子,不再占据流中的位置空间,右盒子上升到了浮动盒子的区域并且被浮动盒子覆盖住了。现在再给左、右盒子皆设置"float: left"属性,此时三个盒子水平排列在一行上。重设左盒子的宽度、高度皆为120px,可以观察到因为"body"盒子较窄,所以右盒子被迫换行并且因为左盒子的高度超过了中间盒子,右盒子被卡在了中间盒子下方。
 以上为浮动盒子的特性。完成以上所讲的步骤即可通过测试,进入下一节的学习吧。

原站题解

HTML/CSS/JavaScript 解法, 执行用时: 1740ms, 内存消耗: 77828KB, 提交时间: 2022-01-24

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            * {\n                margin: 0;\n                padding: 0;\n            }\n            body{\n               width:300px; \n            }\n            .center{\n                width:100px;\n                height:100px;\n                background:yellow;\n                float:left;\n            }\n            .left{\n                width:120px;\n                height:120px;\n                background:green;\n                float:left;\n            }\n            .right{\n                width:100px;\n                height:100px;\n                background:red;\n                float:left;\n            }\n        </style>\n    </head>\n    <body>\n    \t<div class=\"left\"></div>\n        <div class=\"center\"></div>\n        <div class=\"right\"></div>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77812KB, 提交时间: 2021-12-30

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            * {\n                margin: 0;\n                padding: 0;\n            }\n            \n            body{\n                width:300px;\n            }\n            \n            .left{\n                width:120px;\n                height:120px;\n                background-color:red;\n                float:left;\n            }\n            \n            .right{\n                width:100px;\n                height:100px;\n                float:left;\n            \n                background-color:green;\n            }\n            \n            .center{\n                width:100px;\n                height:100px;\n                background-color:yellow;\n                float:left;\n            }\n        </style>\n    </head>\n    <body>\n    \t<div class=\"left\"></div>\n        <div class=\"center\"></div>\n        <div class=\"right\"></div>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77996KB, 提交时间: 2022-01-22

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            * {\n                margin: 0;\n                padding: 0;\n            }\n            body{\n                width:300px;\n            }\n            .left,.center,.right{\n                width:100px;\n                height:100px;\n                float:left;\n            }\n            .left{\n                background-color:red;\n  \n                width:120px;\n                height:120px;\n            }\n            .center{\n                background-color:orange;\n            }\n            .right{\n                background-color:green;\n            }\n        </style>\n    </head>\n    <body>\n    \t<div class=\"left\"></div>\n        <div class=\"center\"></div>\n        <div class=\"right\"></div>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1743ms, 内存消耗: 77796KB, 提交时间: 2022-01-21

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            body{\n                width:300px;\n            }\n            * {\n                margin: 0;\n                padding: 0;\n            }\n            .left,.center,.right{\n                width:100px;\n                height:100px;\n                float:left;\n            }\n            .left{\n                width:120px;\n                height:120px;\n                background:pink;\n            }\n            .center{\n                background:blue;\n            }\n            .right{\n      \n                background:yellow;\n            }\n        </style>\n    </head>\n    <body>\n    \t<div class=\"left\"></div>\n        <div class=\"center\"></div>\n        <div class=\"right\"></div>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1743ms, 内存消耗: 79716KB, 提交时间: 2022-01-22

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            * {\n                margin: 0;\n                padding: 0;\n            }\n            body{\n                width:300px;\n                \n            }\n            .left{\n                width:120px;\n                height:120px;\n                background:black;\n                float:left;\n            }\n            .center{\n                width:100px;\n                height:100px;\n                background:pink;\n                float:left;\n            }\n            .right{\n                width:100px;\n                height:100px;\n                background:yellow;\n                float:left;\n            }\n        </style>\n    </head>\n    <body>\n    \t<div class=\"left\"></div>\n        <div class=\"center\"></div>\n        <div class=\"right\"></div>\n    </body>\n</html>","libs":[]}

上一题