理解CSS clear:both/left/right的含义以及应用

前言：

感觉是刚过春招，又要开始秋招，对于技术渣渣、学历普通的我，忧愁再次降临。开始准备秋招路途中……来温故而知新，沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right，平时只用到clear:both，好像也只见到这个，这就尴尬了。

一、什么是浮动，标准文档流又是个啥

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

当前所知的脱离文档流的方式有两种：浮动和定位。

在了解什么是浮动之前，首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。我们看看下面的效果：

可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。以上这些理论，是指标准流中的div。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。

显然标准流已经无法满足需求，这就要用到浮动。

浮动可以理解为让某个div元素脱离标准文档流，漂浮在标准文档流之上，和标准文档流不是一个层次。

例如，假设上图中的div2左浮动（float:left），那么它将脱离标准文档流，但div1、div3仍然在标准文档流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：

从图中可以看出，由于对div2设置左浮动(float:left;)，因此它不再属于标准文档流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。
这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。
如果我们把div2采用右浮动，会是如下效果：

此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3组成的流。以上我们看到的是只有一个div设置浮动，那么如果设置多个div浮动，效果又是怎么样呢？

我设置div2右浮动，div3左浮动，效果如下：

同理，由于div2、div3浮动，它们不再属于标准文档流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准文档流之上，因此div2又挡住了div4。

当同时对div2、div3设置浮动之后，div3会跟随在div2之后，div2在每个例子中都是浮动的，但并没有跟随到div1之后。因此，我们可以得出一个重要结论：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

2、清除浮动

目前民间流传的清除浮动方法：

clear语法：

clear : none | left | right | both

取值：

none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

我第一次看到这个定义的想法是，clear: left认为是“清除左浮动”，clear: right是清除右浮动。定义非常容易理解，但是读者实际使用时可能会发现不是这么回事。

在理解这个之前，请先记住一句话：“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”---来自张鑫旭

根据上边的基础，我们来看一个简单的例子，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。

这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。那我们来试一下刚才说的这个方法，结果还是原来的这个，并没有起到效果，可见这种理解是错误的。

所以呢，要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。实践效果如下：

这样就达到了效果，试想一下，如果两个div都是右浮动，那么要如何实现上下排列呢，也就是div2在div1的下面？

可以看出div2的右边有一个浮动元素div1，那么我们可以在div2的CSS样式中使用clear:right;来指定div2的右边不允许出现浮动元素，这样div2就被迫下移一行，排到div1下边。

3、具体例子

解析完了具体的理论知识，来进行实践一下好了。假如现在需要完成下面的效果，大家想想你会用什么布局来实现呢？

我的实现方法是，利用2个div，第一个div中包含头像和姓名，第二个div中包含自我描述，然后第一个div左浮动，第二个div也是左浮动。虽然这种方法实现了这个效果，而且大家也都是这么做的，但是这样写会显得没有那么专业，首先这三个应该是属于平级的，然而用我的实现方法来看，我们分成了2个级。那么要如何用平级实现以上的效果，大家想想就知道啦，既然上文的内容是清除浮动，那么就用这个实现。

于是代码以及布局如下：

<div style="width:500px;overflow:hidden;_zoom:1;"><div style="float:left;width:100px;">头像</div><p style="float:left;clear:left;">姓名</p><div style="margin-left:106px;">自我描述</div></div>

理解CSS clear:both/left/right的含义以及应用相关推荐

理解 css - clear:both
clear属性总结clear 1.下图是三个盒子右浮动 ,.clear 作用在第二个盒子上,当是clear : right (clear : left没效果)的时候第二个盒子才会跑到第二行,并且对第 ...
html clear属性值,clear属性有哪些属性值 CSS clear属性的理解.
CSS clear是什么属性... 语法: clear : none | left |right | both 参数: none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left ...
CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
理解 CSS 布局和块级格式上下文
本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用过CSS 布局你 ...
css clear属性_CSS中的clear属性
css clear属性 CSS | 清除财产 (CSS | clear Property) We know so much about float property and how it is use ...
进一步理解CSS浮动与清除浮动
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动,并撑开父元素. 起因 CSS的浮动,算是我在写网页时用的最多的属性之一.但要说我对浮动的了解程度 ...
深入理解CSS margin折叠
什么是margin折叠? W3C对于外边距叠加的定义: In CSS, the adjoining margins of two or more boxes (which might or might ...
理解CSS Floats
原作者:Steven Bradley 发表时间:2009年10月15日原文链接:http://www.vanseodesign.com/css/understanding-css-floats/ 翻 ...
转载--css clear .float
经验分享:CSS浮动(float,clear)通俗讲解很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

理解CSS clear:both/left/right的含义以及应用

理解CSS clear:both/left/right的含义以及应用相关推荐

最新文章

热门文章