如何清除浮动

来源：互联网发布：java从小白到大牛 pdf 编辑：程序博客网时间：2024/05/01 20:06

概述

本文的大体结构框架如下图：

CSS浮动.png

1.浮动到底是什么？

W3school中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

css浮动

2.浮动有什么特点？

浮动的特点，可以用八个字总结：脱标、贴边、字围和收缩。
为了更好说明，请看下图：
当框 1 向左浮动时，它脱离文档流（脱标）并且向左移动（贴边），直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果框2中有文字，就会围着框1排开（字围）。
如果把所有三个框都向左浮动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

CSS 浮动实例 - 向左浮动的元素

下面着重讲解下第四个特点——收缩
一个浮动的内联元素（比如span img标签）不需要设置display：block就可以设置宽度。

<style>        div{            float: left;            background-color: greenyellow;        }    </style></head><body><div>    这是一段文字</div></body>

得到以下的效果：

image.png

我们都知道div标签是块级元素，会独占一行，然而上面的例子中将div设置为左浮后，其宽度不再是占满一行，而是收紧为内部元素的宽度，这就是浮动第四个特征的含义。

3.浮动有什么缺点？

先看下面这段代码：

  <style>      .parent{          border: solid 5px;          width:300px;      }      .child:nth-child(1){          height: 100px;          width: 100px;          background-color: yellow;          float: left;      }      .child:nth-child(2){          height: 100px;          width: 100px;          background-color: red;          float: left;      }      .child:nth-child(3){          height: 100px;          width: 100px;          background-color: greenyellow;          float: left;      }    </style></head><body><div class="parent">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div></div></body>

我们想让父容器包裹着三个浮动元素，然而事与愿违，得到却是这样的结果：

父容器高度塌陷

这就是浮动带来副作用----父容器高度塌陷，于是清理浮动就显着至关重要。

4.如何清理浮动？----清除浮动不是不用浮动，清除浮动产生的父容器高度塌陷。

套路1：给浮动元素的父元素添加高度
如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，这种方法在实际中用的比较少；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。所以只需将 .parent部分设置height：100px;就可以清除浮动。
套路2：clear:both;
在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。
但是我们可以在页面中不添加这些没有意义的冗余元素，而实现清除浮动吗？当然可以，只需在父元素.parent部分设置如下代码：

.parent::after {      content:"";      display:block;      height:0;     line-height:0;     visibility:hidden;     clear:both;}  .parent{  *zoom;1;/*兼容IE67*/   }

这里我们也可以给父元素设置overflow:auto，但是为了兼容IE最好使用overflow:hidden。
但这种办法有个缺陷：如果有内容出了盒子，用这种方法就会把多的部分裁切掉，所以这时候不能使用。
BFC的主要特征
① BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
②BFC不会重叠浮动元素
③BFC可以包含浮动,这可以清除浮动。

5.总结

1）加高法

浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

2） clear:both;

最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响

3）伪元素清除浮动

这种方法值得推荐使用，可以解决IE6/7的兼容问题

4）给父集元素使用overflow:hidden;

这种方法适用于容器内容没超过父容器的范围。

阅读全文

0 0