元素浮动与清除浮动

元素浮动与清除浮动

• 一、元素浮动

• 二、清除浮动

  我们知道，块元素具有的特点是具有完整的盒模型和自己占一行。当我们想让多个块元素同占一行时，我们通常使用的方法除了利用display属性之外，还可以利用float属性，使其浮动，达到同占一行的效果。

一、元素浮动

  float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

  比如我们先对页面中添加三个div，对他们分别定义如下样式

        .d1{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color:palevioletred;
        }
        .d3{
            width: 100px;
            height: 100px;
            background-color:blueviolet;
        }

  这时由于块元素的特性，它们每个各占一行。

  现在我们同时给他们定义float: left;。这样，它们就独占一行了。显然，我们为该属性定义的left定义了元素向左浮动。对于浮动，我们可以简单地理解为元素向上漂浮了起来，浮动到了同一行。而且浮动后的排列顺序和原来的一样。

二、清除浮动

  根据float属性的定义我们知道任何元素都可以浮动。我们先来为列表元素定义浮动。

CSS

        ul{
            list-style: none;
        }

        ul .item{
            float: left;
        }

HTML

   <ul>
       <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
       <li class="item">4</li>
   </ul>

  到这里得到的效果还和我们预想的一样，但当我们检查页面元素时会发现，明明子元素li还拥有正常的高度，父元素ul的高度却为0。这是我们使用浮动的一个被动效果。

  要知道，在没有明确地定义前，父元素的高度是靠子元素的高度撑起来的。而且元素浮动会使元素脱离文档流。我们前面说了，元素浮动我们可以假想为它们上浮了，上浮了某种层面上来说子元素与父元素就不在同一平面上了，当然也就没办法撑开父元素的高度。

  这时我们就需要去清除浮动了。这并不是指取消浮动效果，而是取消浮动的会使父元素丢失高度的被动效果。

  这时我们可以利用clear属性。该属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。

  我们一般清除浮动使用两种方法。

(一)额外添加标签

  我们前面已经定义了列表元素向左浮动，现在我们在列表的末尾新建一个div元素，仅定义clear:left属性。

注意，此时的div不能定义float属性。最好也不要定义宽高，因为定义后父元素的高度就是被div给撑开的。而且clear定义的方向与float定义的方向相同。

  这时我们发现父元素ul的高度恢复为子元素的高度了。

  clear的原理其实是让父元素的盒子闭合出入口，阻止子元素溢出。而子元素一般是由float的方向溢出的，因此我们clear的方向应与float的方向相同以达到阻止子元素溢出的作用。

(二)利用伪元素清除浮动

  伪元素其实我们可以理解为创建了一个虚假的元素，插入在指定元素的相对的某位置。::before和::after伪元素我们就可以理解为插在某元素前/后的幽灵元素。它在html中不存在，但在页面中可以拥有真实实体。

  对伪元素我们需要定义content属性，该属性定义了伪元素在页面中的文本内容。

CSS

        p::before{
            content: 'before'
        }
        p::after{
            content: 'after'
        }

HTML

<p>段落</p>

  这就是伪元素的功能。不过如果你不想让伪元素内的内容显示，可以使用visibility属性，使其为hidden。

  关于利用伪元素清除浮动，我们需为父元素添加伪类::after,并定义clear:both,即可清除浮动。当然也可以同时设置::before和::after伪元素并定义clear:both。

因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动

CSS

        ul{
            list-style: none;
        }

        ul .item{
            float: left;
        }
        ul::after{
            content: '';
            display: block;
            clear: both;
        }