解密clear:both的真实含义 及 after伪元素清浮动的核心原理

码匠（HTML5学堂）：据说只有12%的HTML5（前端）开发工程师，在最初学习浮动布局时，没有被clear属性所“迷惑”……

你，是那12%么？

clear: both 或许你认错了它

clear: both; 对于众多HTML5初学者来说，对这个属性的理解都存在着一些误区。

不信？来试试（不定项选择）：

A 清除掉 当前元素的浮动效果，防止当前浮动元素对其他兄弟级元素的影响

B 让当前元素左右不存在浮动元素

C 清除掉 当前元素前后相邻的兄弟级浮动元素对当前元素的影响

D 清除掉 当前元素前面相邻的兄弟级浮动元素对当前元素的影响

Tips：当前元素，指的是设置clear: both的这个元素

○

↓ ↓ 答案 在下面 ↓ ↓

○

○

○

○

○

○

公布正确答案

D

不知道你是否答对了呢？

其实，在众多书籍以及网络资料当中，关于clear属性的解释都是这个样子 ——

Tips：图源自W3school

众多资料当中的不合理解释，自然就成为了我们学习者理解错误的原因啦~！

实例解析clear属性及伪元素清浮动原理

So，视频课程送给大家~~~

课程大纲（梗概）：

• clear属性的真实含义
• 清浮动的两种类型，清浮动时要区分清楚
• after伪元素清浮动的方法及其核心原理

悄悄告诉你

视频课程免费~而且最近应该还会更新其他课程哦！

利利在10年前开始学习WEB前端时，也不是那12%的人，被clear: both的真实含义蒙骗了好久啊~~~

在编写《HTML5布局之路》时，其实考虑过把这个知识更新进去，然而迫于一些压力…………额，期待第二版的书籍当中能够把各种细节修缮的更好吧~

不足之处还望多多包涵，谢谢大家！~！

视频课程地址

《解密clear:both的真实含义 及 after伪元素清浮动的核心原理》 视频课程

扫描如下二维码

案例demo与学习资源

发送 “clear” 到公众号即可获取本视频相关资料