首页 > 代码库 > CSS中clear属性的both、left和right浅析
CSS中clear属性的both、left和right浅析
前端开发中，我们知道clear属性有none、both、left和right四个值。
它们的具体含义如下：
- none：允许两边都可以有浮动对象；
- both：不允许有浮动对象;
- left：不允许左边有浮动对象;
- right：不允许右边有浮动对象。
这里主要讨论both、left和right三个值。
要用到的CSS代码如下：
<style type="text/css"> .container{ margin: 30px auto; width:600px; height: 300px; } .p{ border:solid 3px #a33; } .c{ width: 100px; height: 100px; background-color: #060; margin: 10px; } .fl{ float:left; } .fr{ float:right; } .cl{ clear:left; } .cr{ clear:right; } .both{ clear:both; } </style>
一、普通浮动，无清除浮动，外容器塌陷：
DOM结构：
<div class="container"> <div class="p"> <div class="c fl"></div> <div class="c fl"></div> <div class="c fl"></div> </div> </div>
效果图：
二、左浮动，clear:both清除浮动：
DOM结构：
<div class="container"> <div class="p"> <div class="c fl">float left 1</div> <div class="c fl">float left 2</div> <div class="c both">clear both</div> </div> </div>
效果图：
三、右浮动，clear:both清除浮动：
DOM结构：
<div class="container"> <div class="p"> <div class="c fr">float right 1</div> <div class="c fr">float right 2</div> <div class="c both">clear both</div> </div> </div>
效果图：
四、左右浮动，clear:both清除浮动：
DOM结构：
<div class="container"> <div class="p"> <div class="c fl">float left</div> <div class="c fr">float right</div> <div class="c both">clear both</div> </div> </div>
效果图：
五、左浮动，清除左浮动，左浮动，未清除浮动的塌陷：
DOM结构：
<div class="container"> <div class="p"> <div class="c fl">float left1</div> <div class="c cl">clear float left</div> <div class="c fl">float left2</div> </div> </div>
效果图：
六、右浮动，清除右浮动，左浮动，未清除浮动的塌陷：
DOM结构：
<div class="container"> <div class="p"> <div class="c fr">float right</div> <div class="c cr">clear float right</div> <div class="c fl">float left</div> </div> </div>
效果图：
CSS中clear属性的both、left和right浅析
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。