浮动布局的使用和如何消除浮动

浮动是网页布局中一个非常重要的属性，使用它可以十分轻易的实现多列布局和文本环绕效果。

浮动布局

浮动布局简单来说有以下几个作用：

• 实现文字环绕效果
• 让块级元素同行显示且不会有空隙
• 让行内元素可以设置宽高 接下来对其一一进行讲解。

---

文字环绕效果

如图所示，浮动属性其实在设计之初就是为了实现文字环绕的效果，如果不用浮动的话实现文字环绕的过程会变得十分得复杂且繁琐。实现文字环绕只需要给图片设置上float:left//right即可。

让块级元素同行显示

我使用了一个ul包含三个li来实现。实现同行显示只需要给三个li设置float:left//right。当然不使用float也有其他的一些属性能够实现让块级元素同行显示，但是有些方法很容易出现一些很难找到原因的问题。比如当我们给三个li设置display:inline-block;有可能会出现以下情况。

三个li之间有着一点间隙，如果是新手想必怎么也想不明白为什么会出现这种情况是因为转变为行内块级元素后，标签之间的空格就会被识别。这时只需要将li之间的空格去掉就能去掉间隙。

或者也可以给ul{font-size:0px;}这样也能去掉空格，但是记得给li的font-size赋回你想要的值，不然你写在li中的字也会因为继承了ul的font-size属性而消失。不过这两种方法都不如直接设置浮动属性优雅，建议在工作中千万不要使用。

让行内元素可以设置宽高

我们都知道，行内元素原本是不能设置宽高的，只能通过内部元素撑开。可是当你给一个行内元素设置了float:left//right;比如(span)，这个行内元素就会脱离文档流，这时你就会发现span可以设置宽高了。

---

注意 .这里有一个面试官可能会问到的一个问题，给行内元素设置浮动属性后能够设置宽高那能不能设置margin呢？能设置margin的话那我设置margin:0 auto;会发生什么呢？

首先我直接告诉你给行内元素设置完浮动属性后是能够设置margin的。

这是我给三个span设置了margin:100px 的效果。那margin能设置的话设置margin:0 auto;会怎么样呢？

我们都知道margin:0 auto;可以使盒子居中，我们会很想当然的认为能设置margin那margin:0 auto;一定有用，然后很高兴的回答面试官会让元素居中。然而这个时候面试官就微微一笑就，挖了个坑今天又坑到一个。正确答案是给行内元素设置margin:0 auto;并不会让他居中，什么都不会发生。

消除浮动

讲了那么多浮动布局的优点，接下来要说一说浮动布局的缺点。

<ul class="clear">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="content"></div>

我们给三个li设置了浮动属性，我们能很明显的发现，给三个li设置了浮动属性后，整个ul直接重叠在了下一个div上。这时候就需要消除浮动，消除浮动就是要消除浮动带来的负面影响。

---

消除浮动的几个方法

• 给父容器设置高度或给父容器也设置浮动属性//绝大多数场景不适用
• 增加子容器，在子容器上清除浮动
• 借助伪元素 after 来清除浮动
• BFC

1. 给父容器设置高度//绝大多数场景不适用

首先我们先来找找ul直接重叠在div上的原因。通过右键检查我们能够发现，此时ul的高度为0。

原来是因为三个li脱离了文档流，导致他们的高度不被计算在文档流之内的ul之内。因此我们就可以通过直接给ul设置高度或者干脆就给ul也设置浮动属性，让他也脱离文档流，这样ul就有高度了。

2.增加子容器，在子容器上清除浮动

其实在html5中有一个专门有一个属性用来清除浮动。

clear:right;// 消除左浮动
clear:left;// 消除右浮动
clear:both;// 左右浮动都消除

我们想要消除浮动只需要让ul中不会所有元素都处于浮动的状态，因此我们可以给ul添加一个子属性，并给他加上clear属性。这样也能达到清除浮动的目的。

3.借助伪元素 after 来清除浮动

这是我认为最好用的一种方法。通过使用伪类选择器，在ul的尾标签前添加一个after伪元素，并赋予它clear属性，这个方法和第三个方法同理，不过使用上代码更为优雅。

4.BFC

BFC全称Block Formatting Context（块级格式上下文），简单来说bfc的效果是让处于bfc内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。细致点说就是以下三点。

1. 内部盒子也会遵照文档流的顺序排列
2. bfc容器在计算高度时，会将内部浮动的子元素的高度也计算在内
3. 解决外边距重叠问题

仔细看，bfc容器内部盒子既能遵照文档流的顺序排列，又能让子元素的高度计算在内。这不是恰好是我们清除浮动想要的吗。只要将外部容器设置为BFC容器，就能够清除浮动。那如何设置一个BFC容器呢。

很简单，只要我们从以下这些属性中挑选一个添加给一个容器，那这个容器就是一个BFC容器。

  1. 浮动：float：left||right//不能消除浮动但是是一个BFC容器
  2. 定位：position：absolute  ||  fixed
  3. 行内块：display：inline-block
  4. 表格单元：dispaly:table-cell  || table-xxx
  5. overflow:auto || hidden || scroll
  6. 弹性盒子： display:flex ||  inline-flex