CSS清除浮动

在实际操作中，一般不会给父亲盒子设置高度，它的高度是随内容增加自适应的高度。浮动盒子不属于文档标准流，父亲盒子里的元素浮动后，就脱离了标准文档流，所以无法撑高父亲盒子，父亲盒子的高度为0，也就会出现父亲盒子不会自动伸高来闭合浮动元素的现象。但是，在实际布局中，我们并不希望这样，所以需要闭合浮动元素，使其父亲盒子表现出正常的高度。为了解决这个问题，我们就要清除浮动。 清除浮动一般有 4 种方法。

1. 给浮动元素的祖先元素添加高度

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

2. clear:both;

在较后面的最后一个盒子增加clear:both;

clear就是清除，both指的是左浮动、右浮动都要清除。最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。但这种方法有一个非常大的、致命的问题，margin失效了。

3. 隔墙法

1）外墙法

image

image

2） 内墙法

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

image

4. overflow:hidden

overflow就是“溢出”的意思， hidden就是“隐藏”的意思。表示“溢出隐藏”，所有溢出边框的内容，都要隐藏掉。本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。并且,overflow:hidden;能够让margin生效。

image

div的具体代码如下：

image