傳智播客在2016年的web教學視頻中，講到了clear:both清除浮動的用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 500px; height: 300px; border: 1px solid red; float: left; } #div2{ width: 500px; height: 300px; border: 1px solid black; } #div3{ width: 500px; height: 300px; border: 1px solid pink; } #div0{ clear: both; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <!--<div id="div0"></div>--> <div id="div3"></div> </body> </html>
他的本意是DIV2和DIV3不受DIV1浮動的影響，但是他將float屬性加在了DIV1上面導致該屬性不能生效，這是因為：
在 css 文檔里面規定 clear:both 的意思是：要求框的頂邊框邊低於在源文檔中之前生成的任何浮動框的底外邊距邊。
所以有 clear:both 屬性的元素放在浮動元素之后才能起到清除浮動的作用。
對於 clear 屬性一定要牢記的是：
clear只能清除該元素之前的浮動。
"clear on an element only clears the floats before it in document order. It doesn't clear floats after it."
清除浮動的方式有不少，不過最常見，也是最優化的一種就是就是使用偽元素：
Parent :after{
clear:both;
display:block;
content:"";
}