css下clear both、left、right值的含义

时间：2022-06-25 09:01:24 编辑：袖梨来源：一聚教程网

clear的值有四个

1.none：允许两边都可以有浮动对象；
2.both：不允许有浮动对象；
3.left：不允许左边有浮动对象；
4.right：不允许右边有浮动对象。
老实说，我没真正理解字面上的意思，因为这几段话是有歧义的，例如clear:right的解释是“不允许右边有浮动对象”，我一直以为是清除自身右方（下方）容器的浮动。但其实不是。下面一个一个DEMO的看，希望你能懂left和right到底是清除哪里的浮动。

一、普通浮动，无清除浮动，外容器塌陷：DEMO

代码如下

复制代码

普通浮动，无清除浮动，外容器塌陷

float:left;

float:left;

float:left;

二、左浮动，clear:both清除浮动：DEMO

代码如下

复制代码

左浮动，clear:both清除浮动

float:left;

float:left;

clear:both;

三、右浮动，clear:both清除浮动：DEMO

代码如下

复制代码

右浮动，clear:both清除浮动

float:right;

float:right;

clear:both;

四、左右浮动，clear:both清除浮动：DEMO

代码如下

复制代码

左右浮动，clear:both清除浮动

float:left;

float:right;

clear:both;

五、左浮动，清除左浮动，左浮动，未清除浮动的塌陷：DEMO

代码如下

复制代码

左浮动，清除左浮动，左浮动，未清除浮动的塌陷

float:left;

clear:left;

float:left;

六、右浮动，清除右浮动，左浮动，未清除浮动的塌陷：DEMO

代码如下	复制代码
右浮动，清除右浮动，左浮动，未清除浮动的塌陷 float:right; clear:right; float:left;

（浮动外层容器加了背景色，如果此元素没有浮动，背景色即会包住他，反之则包不住）

他们共用的css代码如下

代码如下	复制代码

推荐专题

最新下载

热门教程

css下clear both、left、right值的含义

普通浮动，无清除浮动，外容器塌陷

左浮动，clear:both清除浮动

右浮动，clear:both清除浮动

左右浮动，clear:both清除浮动

左浮动，清除左浮动，左浮动，未清除浮动的塌陷

右浮动，清除右浮动，左浮动，未清除浮动的塌陷

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程