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

Posted 2023-02-25 Wendy-lxq

前言：

       感觉是刚过春招，又要开始秋招，对于技术渣渣、学历普通的我，忧愁再次降临。开始准备秋招路途中……来温故而知新，沉下心好好学习。貌似本人在清除浮动中第一次接触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>