为什么要清除浮动？
在文档流中，块级元素是自动占满一行从上到下排列的，行内元素是从左到右排列的。但是当我们给元素设置了浮动后，该元素就脱离文档流了，浏览器渲染时也会和我们预想的效果不一样。下面给一个实例：
显然按照html，我们希望三个红格子被一个大框框所包裹，上下的文字也可以被隔离开。但是当我们给红格子设置了浮动属性后出现了问题**红格子并没有到大框框中**。
这都是红格子浮动脱离文档流造成的，现在我们来解决这个问题。
清除方法
直接给大框框加一个高度
但是这样做也存在问题，大框框的高度定死了，万一后面还要加东西怎么办？
这里的这个无序列表有两个问题：一是文字环绕，不是我们想要的；二是第4直接跳出了框框。我们把这个问题暂且记下，最后解决。
改用BFC
让大框框自己形成一个BFC是不错的的办法。
形成BFC也有很多种方法，下面举几个例子
overflow：auto
display：inline-block
float：left
这里问题很明显，下面的文字竟然“爬上去“了，不是我们想要的，把这个问题也记下，后面解决。
以上做法多多少少会有些问题，原因很简单：形成BFC的这些css样式原本并不是用作清除浮动的，自然会引入一些不是我们预期的样式。
在大框框最后加入一对空标签
这样做最大的问题就是语义化不太好。
添加伪类
受上面一种方法的启发，我们可以采用伪类达到和添加空标签一样的效果。
考虑到伪类的兼容性问题，下面这样写更好
解决过程中遇到的新问题
之前我们在大框框里面又添加了一个无序列表，出现了一些问题，给大框框设为浮动也有问题，我们现在解决它们。
前文说的有两个问题，分别解决
1. 文字环绕。这也是浮动造成的，还是要清除浮动。
这下无序列表就不环绕了，同理大框框不设为浮动下方文字也不会去环绕大框框。
2. 无序列表不在大框框里。这个只要不采用将大框框高度设定死的方法就行。
好了，这样就和我们预想的效果基本一样了。
网友评论