html css 浮动的清除方法大全

讲之前先给大家分享一个段子：
酒桌上，领导醉意微微，拿起酒杯，说：
20多岁的男人，就像啤酒，生活节奏快！
30多岁的男人，就像红酒，生活讲究品位！
40多岁的男人，像我，就像白酒，而且还是陈酿，一滴就能把你醉倒！
美女小王也有点醉意，说了一句让人浮想联翩的话：你这岁数，能滴出一滴就不错了！

浮动的清除
这里所说的清除浮动，指的是清除浮动与浮动之间的影响。
那么为何要清除浮动？
要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是 “position:absolute” 的一个子类）。
1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做 普通流 （normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow （文档流）
2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
通过最近一段时间的学习，我们发现，网页就是通过浮动实现并排的。

比如说一个网页有header、content、footer这三部分。就拿content部分来举例，如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。

从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。

下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下：

上面这个例子很简单。可如果我们给里面的

• 标签加浮动。效果却成了下面这个样子，代码如下：
  

• 效果如下：
  

  上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。

  这便引出我们要讲的：清除浮动的第一种方式。
  那该怎么解决呢？

  方法1：给浮动元素的祖先元素加高度
  造成前言中这个现象的根本原因是：li的父亲div没有设置高度，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。

  撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。

  好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象：
  

  给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：
  

  总结：

  如果一个元素要浮动，那么它的祖先元素一定要有高度。

  有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）

  只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
  

  方法2：clear:both;
  网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法1，工作中用得很少。

  那么，能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

  这个时候，我们可以使用clear:both;这个属性。如下：
  

  clear:both;
  clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。

  这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。读者可以试试看。

  margin失效的本质原因是：上图中的box1和box2，高度为零。

  方法3：隔墙法
  上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性。既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。

  我们看看例子效果就知道了：
  

  上图这个例子就是隔墙法。

  内墙法：

  近些年，有演化出了“内墙法”：
  

  上面这个图非常重要，当作内墙法的公式，先记下来。

  为了讲内墙法，我们先记住一句重要的话：一个父亲是不能被浮动的儿子撑出高度的。举例如下：

  （1）我们在一个div里放一个有宽高的p，效果如下：（很简单）
  

  （2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了：
  

  （3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度：
  

  于是，我们采用内墙法解决前言中的问题：
  

  与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。

  而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。

  清除浮动方法4：overflow:hidden;
  我们可以使用如下属性：

  overflow:hidden;
  overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下：
  

  上图显示，overflow:hidden;的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：

  一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

  举个例子：
  

  那么对于前言中的例子，我们同样可以使用这一属性：
  

  浮动清除的总结
  我们在上一段讲了四种清除浮动的方法，本段来进行一个总结。

  浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。

  1、加高法
  工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
  

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

  浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。

  3、隔墙法
  在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
  墙用自己的身体当做了间隙。
  

  我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。

  内墙法：
  

  内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

  4、overflow:hidden;
  这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
  我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。
  并且,overflow:hidden;能够让margin生效。