css下clear both、left、right值的含义
clear的值有四个
1.none:允许两边都可以有浮动对象;
2.both:不允许有浮动对象;
3.left:不允许左边有浮动对象;
4.right:不允许右边有浮动对象。
老实说,我没真正理解字面上的意思,因为这几段话是有歧义的,例如clear:right的解释是“不允许右边有浮动对象”,我一直以为是清除自身右方(下方)容器的浮动。但其实不是。下面一个一个DEMO的看,希望你能懂left和right到底是清除哪里的浮动。
一、普通浮动,无清除浮动,外容器塌陷:DEMO
代码如下 | 复制代码 |
<div class="box clearfix" id="box1"> |
二、左浮动,clear:both清除浮动:DEMO
代码如下 | 复制代码 |
<div class="box clearfix" id="box2"> |
三、右浮动,clear:both清除浮动:DEMO
代码如下 | 复制代码 |
<div class="box clearfix" id="box3"> |
四、左右浮动,clear:both清除浮动:DEMO
代码如下 | 复制代码 |
<div class="box clearfix" id="box4"> |
五、左浮动,清除左浮动,左浮动,未清除浮动的塌陷:DEMO
代码如下 | 复制代码 |
<div class="box clearfix" id="box5"> |
六、右浮动,清除右浮动,左浮动,未清除浮动的塌陷:DEMO
代码如下 | 复制代码 |
<div class="box clearfix" id="box6"> <h3>右浮动,清除右浮动,左浮动,未清除浮动的塌陷</h3> <ul> <li class="item d_l fr">float:right;</li> <li class="item d_c cr">clear:right;</li> <li class="item d_r fl">float:left;</li> </ul> </div> |
(浮动外层容器加了背景色,如果此元素没有浮动,背景色即会包住他,反之则包不住)
他们共用的css代码如下
代码如下 | 复制代码 |
<style> |
您可能感兴趣的文章:
css下clear both、left、right值的含义
CSS语法手册四文本填充,边框,边界和位置属性二
分享mysql备份的三种方式
解决HTML5新标签的浏览器兼容性问题
详细学习CSS中的网页布局的属性
清除浮动clear:both的应用详解
CSS手册简编:布局属性
H5新标签浏览器的兼容问题
jQuery EasyUI API 中文文档 - Pagination分页
CSS中background-position用法与负值定位