&nbs p;
零、说点什么
好久没更新了。并不是在折腾什么大作，而是广度学习与实践中，加上婚礼等诸多大事，所以产出较少。
今天这篇也只是小作，博客是自己很好的学习工具，只要我学习不止，博客也会不断更新的。
我们平时一般都使用 clear:both 清除浮动，貌似就干这一件事件。用得很开心，但似乎理解上懵懵懂懂，我其实也是，早年的时候，测试过 CSS clear:left/right ，虽知其作用（80%确定而已），但不知其机理。
有必要再次整理下，温故知新。可能很多同行都没有注意 left/right 值， 或者 可能理解上含糊，或者不 知道 其实际意义在何处。So, follow me!
一、理解clear: left/clear: right
我不清楚大家是不是跟我一样，我之前 文章 ，写浮动那 一块 的时候，以及后来，都是以“ clear:both 清除浮动”这样的陈述出来的。因此，当想到 clear: left 的时候，自然会认为是“清除左浮动”， clear: right 是清除右浮动。
其实现在想想，这样的理解与表示是不严谨的欠考虑的。
一般，现在中文圈流传的表述是：
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许 右边 有浮动对象
both : 不允许有浮动对象
w3. org 官方 的解释是：「元素 盒子 的边不能和前面的浮动元素相邻」。
我个人 觉得 官方解释更好 一点 。
无论是我“清除左/右浮动”，还是业界流传的“不允许左/右边有浮动对象”，其 意思 都是，设置的clear的元素让浮动元素如何如何。也就是我让 别人 如何如何~~大家可以仔细体会，细细感受下……
而官方的说法则是“设置了clear的元素不能 怎样 怎样”。也就是我自己如何如何~~大家可以再次感受下……
为何官方解释更好呢？难道是“己所不欲勿施于人”的缘故？哈，这个解释赞的，方便记忆。更通俗的 原因 是：
务必记住这句话：“ float是魔鬼，会影响其他相邻元素；但是clear是 小白 ，其 只会影响自身 ，不会对其他相邻元素造成影响！ ”
但是，官方的解释似乎拗口，缺少点灵性。于是，我根据自己的感性认知，做了如下理解：
clear语法：
clear : none | left | right | both
取值：
none : 默认值。
left : 左侧抗浮动
right : 右侧抗浮动
both : 两侧抗浮动
“抗”这个拟人化的动词的发起者是设置了 clear 属性的元素，既形象又释义准确。
实例出真知
您可以狠狠地点击这里：clear:left/right的作用效果demo
例如上图所示的 clear:left 作用示意：图片左浮动，化身魔鬼，要影响后面相邻的元素。一般的元素都逃不了被影响被束缚的命运。除非拥有 clear 技能。例如，这里 clear:left 左侧抗浮动，也就是，左侧的浮动根本就奈何不了我——我还是原原本本在下面显示。
但是，如果图片是右浮动，则 clear:left 仍逃 不过 沦陷的命运，可以看到父级容器的高度塌陷了！
单纯的 clear:left 就像是招潮蟹，一侧雄起，一侧不举。
因此，考虑到通用性，在抗浮动的处理中，我们都是使用 clear:both . 用意很明显：我不必关心你是左浮动还是右浮动，我都通通免疫。
因此，我们才会有下面这段雕琢后的清除浮动通用CSS：
.fix { *zoom: 1; } .fix :after { content: ''; dis play : table; clear: both; } 下面又有问题了，貌似我们接触的 clear 基本上都是 both 值，似乎 left , right 值的出现就是鸡肋，没什么用。真的是这样吗？
二、clear:left/right的实际 用途
clear:left/right 最实际也是最常见的用途就是 实现垂直环绕布局 。
出个 简单 的题目，下图所示的布局实现，你的 HTML 结构会是？
哈，我猜想下，估计你会把“ 头像 img ”和“姓名”放在同一个父级容器中，而这个父级容器左浮动；然后右侧的信息元素浮动跟随（自适应布局），对不对？
这是业界主流做法，其实是没什么问题的？
不过，你有没有细细思考过这样一个问题：“为何大家几乎都是这种HT ML 结构设计？”
实际上，按照我不专业的理解，头像、姓名、自我描述 应该 是平级的兄弟关系。从语义来看，貌似“头像、姓名”硬生生变成 儿子 和女儿是不妥的吧~~
当我们只知道票子放 银行 钱会变多，我们就只会存钱理财。同样的，并不是我们 不想 尝试其他的结构实现布局，而是，我们不知道方法。说穿了，就是对 clear:left/right 理解不透，不够重视！
如何“头像”、“姓名”、“自我描述”三兄弟平起平坐，同时达到我们想要的布局效果呢？就是借助 clear:left , 半 壁 clear 属性配合 float 属性可以实现“垂直环绕布局”。
何为“垂直环绕布局”？上面提供的demo中有示意：
两个图片实际上都是右浮动( float: right )的，这种情况下，显然，图片会是一行排排站。但是，如果后面一张图片设置了右侧抗浮动声明： clear: right . 则，后面一张图片就会落下来，形成垂直布局；加上自身的浮动特性依旧存在，于是，两张图片犹如一个浮动整体。这就是典型的“垂直环绕布局”。
于是，我们如下HTML以及CSS，就有符合题目要求的新型 布局方式 啦！
<div style="width:500px;font- Size: 12px;overflow:hidden;_zoom:1;"> <span style="float:left;width:96px; .. .">头像</span> < strong style="float:left; clear:left; ...">姓名</strong> <p style="m arg in-left:106px;...">我是一个帅哥……</p> </div>
我是一个帅哥……
至此，三兄弟终于平起平坐啦！
更新于2017年1月1日
后来经过我的实践与研究，得到了一个惊人的结论，凡是 clear:left 或者 clear:right 起作用的地方，一定可以使用 clear:both 替换！
原因在于， clear 属性是让自身不能和前面的浮动元素相邻，注意这里“前面的” 3 个字，而 float 属性要么就 left 要么就 right ，不可能同时存在。由于 clear 属性对“后面的”浮动元素不闻不问，因此，当 clear:left 有效的时候， clear:right 必定无效，也就是此时 clear:left 等同于设置 clear:both ，反之亦然。
所以， clear:left 和 clear:right 这两个声明就没有任何使用的 价值 ，至少在CSS世界中是如此，直接使用 clear:both 吧。
三、结语
没睡午觉，好困哪，年轻时候，这个情境下，一定会附首打油诗，现在，不是没有情致，而是身体hold不住。
二十出头状如牛，文章夜行诗回眸。如今而立渐秃头，结语基本打酱油。
嗯哪，希望本文的点内容能够对您的学习有所帮助，感谢阅读，欢迎交流！
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-准确理解CSS clear:left/right的含义及实际用途 全部内容，希望文章能够帮你解决 html5教程-准确理解CSS clear:left/right的含义及实际用途 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-准确理解CSS clear:left/right的含义及实际用途的详细内容...