码匠(HTML5学堂):据说只有12%的HTML5(前端)开发工程师,在最初学习浮动布局时,没有被clear属性所“迷惑”……
你,是那12%么?
clear: both 或许你认错了它
clear: both; 对于众多HTML5初学者来说,对这个属性的理解都存在着一些误区。
不信?来试试(不定项选择):
A 清除掉 当前元素的浮动效果,防止当前浮动元素对其他兄弟级元素的影响
B 让当前元素左右不存在浮动元素
C 清除掉 当前元素前后相邻的兄弟级浮动元素对当前元素的影响
D 清除掉 当前元素前面相邻的兄弟级浮动元素对当前元素的影响
Tips:当前元素,指的是设置clear: both的这个元素
○
↓ ↓ 答案 在下面 ↓ ↓
○
○
○
○
○
○
公布正确答案
D
不知道你是否答对了呢?
其实,在众多书籍以及网络资料当中,关于clear属性的解释都是这个样子 ——
Tips:图源自W3school
众多资料当中的不合理解释,自然就成为了我们学习者理解错误的原因啦~!
实例解析clear属性及伪元素清浮动原理
So,视频课程送给大家~~~
课程大纲(梗概):
悄悄告诉你
视频课程免费~而且最近应该还会更新其他课程哦!
利利在10年前开始学习WEB前端时,也不是那12%的人,被clear: both的真实含义蒙骗了好久啊~~~
在编写《HTML5布局之路》时,其实考虑过把这个知识更新进去,然而迫于一些压力…………额,期待第二版的书籍当中能够把各种细节修缮的更好吧~
不足之处还望多多包涵,谢谢大家!~!
视频课程地址
《解密clear:both的真实含义 及 after伪元素清浮动的核心原理》 视频课程
扫描如下二维码
案例demo与学习资源
发送 “clear” 到公众号即可获取本视频相关资料