今天小编跟大家讲解下有关详解CSS中clear:left/right的用法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关详解CSS中clear:left/right的用法 的相关资料，希望小伙伴们看了有所帮助。
一、理解clear: left/clear: right
当想到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：
CSS Code复制内容到剪贴板 .fix{*zoom:1;} .fix:after{content:'';display:table;clear:both;}下面又有问题了 貌似我们接触的clear基本上都是both值 似乎left, right值的出现就是鸡肋 没什么用。真的是这样吗 二、clear:left/right的实际用途
clear:left/right最实际也是最常见的用途就是实现垂直环绕布局。
出个简单的题目 下图所示的布局实现 你的HTML结构会是
哈 我猜想下 估计你会把“头像img”和“姓名”放在同一个父级容器中 而这个父级容器左浮动；然后右侧的信息元素浮动跟随（自适应布局） 对不对
这是业界主流做法 其实是没什么问题的
不过 你有没有细细思考过这样一个问题：“为何大家几乎都是这种HTML结构设计 ”
实际上 按照我不专业的理解 头像、姓名、自我描述应该是平级的兄弟关系。从语义来看 貌似“头像、姓名”硬生生变成儿子和女儿是不妥的吧~~
当我们只知道票子放银行钱会变多 我们就只会存钱理财。同样的 并不是我们不想尝试其他的结构实现布局 而是 我们不知道方法。说穿了 就是对clear:left/right理解不透 不够重视！
如何“头像”、“姓名”、“自我描述”三兄弟平起平坐 同时达到我们想要的布局效果呢 就是借助clear:left, 半壁clear属性配合float属性可以实现“垂直环绕布局”。
何为“垂直环绕布局” 上面提供的demo中有示意：
两个图片实际上都是右浮动(float: right)的 这种情况下 显然 图片会是一行排排站。但是 如果后面一张图片设置了右侧抗浮动声明：clear: right. 则 后面一张图片就会落下来 形成垂直布局；加上自身的浮动特性依旧存在 于是 两张图片犹如一个浮动整体。这就是典型的“垂直环绕布局”。
于是 我们如下HTML以及CSS 就有符合题目要求的新型布局方式啦！
CSS Code复制内容到剪贴板 <divstyle="width:500px;font-size:12px;overflow:hidden;_zoom:1;"> <spanstyle="float:left;width:96px;...">头像</span> <strongstyle="float:left;clear:left;...">姓名</strong> <pstyle="margin-left:106px;...">我是一个帅哥……</p> </div>至此 三兄弟终于平起平坐啦！
来源：爱蒂网
