关于Clear的总结

引发问题的需求:

      实现三列布局，左右宽度各20%，中间宽度自适应，三列高度均可由元素撑开，当左侧高度>中间高度时，让中间的高度等于左侧的高度，但当中间的高度由于元素撑开导致高于左侧是，左侧高度并不被影响。（只能用CSS实现）

解决过程中遇到的问题：

      不知道如何实现高度的自适应变化。?（在网上找到了一种padding正，magin负的方法，个人觉得这是一个掩耳盗铃的方法。）由于一些巧合，发现用clear竟然可以解决这个问题。

深入研究后的总结：

      原来只是知道clear可以清除浮动，只知道用法，却不知道具体的原理是什么，经过查找资料和一番测试才明白，W3School上的解释是这样的“clear 属性规定元素的哪一侧不允许其他浮动元素。”，原来当你使用clear：left时，他会找到所有左浮动的元素，让这个加有clear属性的元素的上边框?刚好挨着上述左浮动元素的下外边距的边界，直到该元素的左侧不再有左浮动的元素为止。利用clear的这个原理我们就可以解决上述的问题了。