零、说点什么好久没更新了。并不是在折腾什么大作,而是广度学习与实践中,加上婚礼等诸多大事,所以产出较少。 今天这篇也只是小作,博客是自己很好的学习工具,只要我学习不止,博客也会不断更新的。 我们平时一般都使用 有必要再次整理下,温故知新。可能很多同行都没有注意 一、理解clear: left/clear: right我不清楚大家是不是跟我一样,我之前文章,写浮动那一块的时候,以及后来,都是以“ 其实现在想想,这样的理解与表示是不严谨的欠考虑的。 一般,现在中文圈流传的表述是:
官方的解释是:「元素盒子的边不能和前面的浮动元素相邻」。 我个人觉得官方解释更好一点。 无论是我“清除左/右浮动”,还是业界流传的“不允许左/右边有浮动对象”,其意思都是,设置的clear的元素让浮动元素如何如何。也就是我让别人如何如何~~大家可以仔细体会,细细感受下…… 而官方的说法则是“设置了clear的元素不能怎样怎样”。也就是我自己如何如何~~大家可以再次感受下…… 为何官方解释更好呢?难道是“己所不欲勿施于人”的缘故?哈,这个解释赞的,方便记忆。更通俗的原因是: 务必记住这句话:“float是魔鬼,会影响其他相邻元素;但是clear是小白,其只会影响自身,不会对其他相邻元素造成影响!” 但是,官方的解释似乎拗口,缺少点灵性。于是,我根据自己的感性认知,做了如下理解:
“抗”这个拟人化的动词的发起者是设置了 实例出真知 例如上图所示的 但是,如果图片是右浮动,则 单纯的 因此,考虑到通用性,在抗浮动的处理中,我们都是使用 因此,我们才会有下面这段雕琢后的清除浮动通用CSS: .fix { *zoom: 1; }.fix:after { content: ''; display: table; clear: both; } 下面又有问题了,貌似我们接触的 二、clear:left/right的实际用途
出个简单的题目,下图所示的布局实现,你的HTML结构会是? 哈,我猜想下,估计你会把“头像img”和“姓名”放在同一个父级容器中,而这个父级容器左浮动;然后右侧的信息元素浮动跟随(自适应布局),对不对? 这是业界主流做法,其实是没什么问题的? 不过,你有没有细细思考过这样一个问题:“为何大家几乎都是这种HTML结构设计?” 实际上,按照我不专业的理解,头像、姓名、自我描述应该是平级的兄弟关系。从语义来看,貌似“头像、姓名”硬生生变成儿子和女儿是不妥的吧~~ 当我们只知道票子放银行钱会变多,我们就只会存钱理财。同样的,并不是我们不想尝试其他的结构实现布局,而是,我们不知道方法。说穿了,就是对 如何“头像”、“姓名”、“自我描述”三兄弟平起平坐,同时达到我们想要的布局效果呢?就是借助 何为“垂直环绕布局”?上面提供的demo中有示意: 两个图片实际上都是右浮动( 于是,我们如下HTML以及CSS,就有符合题目要求的新型布局方式啦! 头像姓名 我是一个帅哥…… 至此,三兄弟终于平起平坐啦! 更新于2017年1月1日 原因在于, 所以, 三、结语没睡午觉,好困哪,年轻时候,这个情境下,一定会附首打油诗,现在,不是没有情致,而是身体hold不住。 二十出头状如牛,文章夜行诗回眸。如今而立渐秃头,结语基本打酱油。 嗯哪,希望本文的点内容能够对您的学习有所帮助,感谢阅读,欢迎交流! 本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。 |
|
来自: flyingleaves12 > 《数据库》