CSS5. 浮动 - 清除
描述
通过前面的学习了解到，浮动元素会脱离文档流，因此不会影响其他元素。但,在之前介绍浮动盒子时提到了"文档流中的元素几乎认为浮动盒子不存在"，实际上被浮动盒子覆盖的区域中的文本内容会识别到浮动盒子并且绕开浮动盒子。HTML/CSS/JavaScript 解法, 执行用时: 1734ms, 内存消耗: 77780KB, 提交时间: 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 section{\n border:1px #000 solid;\n }\n .media {\n width: 100px;\n height: 100px;\n float:left;\n background-color:red;\n }\n .clear-left{\n clear:left;\n }\n </style>\n </head>\n <body>\n \t<section>\n <div class=\"media\"></div>\n <p>hello</p>\n <p class=\"clear-left\">universe</p>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1742ms, 内存消耗: 77772KB, 提交时间: 2022-01-23
{"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 float:left;\n }\n .media {\n width: 100px;\n height: 100px;\n }\n .clear-left{\n clear: left;\n }\n \n </style>\n </head>\n <body>\n \t<section>\n <div class=\"media\"></div>\n <p>hello</p>\n <p class=\"clear-left\">universe</p>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1744ms, 内存消耗: 77772KB, 提交时间: 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 section{\n border: solid\n }\n .media {\n width: 100px;\n height: 100px;\n float:left;\n background-color: red;\n }\n .clear-left{\n clear:left\n }\n </style>\n </head>\n <body>\n \t<section>\n <div class=\"media\"></div>\n <p>hello</p>\n <p class=\"clear-left\">universe</p>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1747ms, 内存消耗: 77772KB, 提交时间: 2022-01-21
{"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 .media {\n float:left;\n width: 100px;\n height: 100px;\n }\n .clear-left{\n clear:left\n }\n </style>\n </head>\n <body>\n \t<section>\n <div class=\"media\"></div>\n <p>hello</p>\n <p class=\"clear-left\">universe</p>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77772KB, 提交时间: 2022-01-26
{"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 .media {\n width: 100px;\n height: 100px;\n float:left;\n background:blue;\n }\n section{\n border:1px solid red\n }\n .clear-left{\n clear:left;\n }\n </style>\n </head>\n <body>\n \t<section>\n <div class=\"media\"></div>\n <p>hello</p>\n <p class=\"clear-left\">universe</p>\n </section>\n </body>\n</html>","libs":[]}