引发问题的需求:
实现三列布局,左右宽度各20%,中间宽度自适应,三列高度均可由元素撑开,当左侧高度>中间高度时,让中间的高度等于左侧的高度,但当中间的高度由于元素撑开导致高于左侧是,左侧高度并不被影响。(只能用CSS实现)
解决过程中遇到的问题:
不知道如何实现高度的自适应变化。?(在网上找到了一种padding正,magin负的方法,个人觉得这是一个掩耳盗铃的方法。)由于一些巧合,发现用clear竟然可以解决这个问题。
深入研究后的总结:
原来只是知道clear可以清除浮动,只知道用法,却不知道具体的原理是什么,经过查找资料和一番测试才明白,W3School上的解释是这样的“clear 属性规定元素的哪一侧不允许其他浮动元素。”,原来当你使用clear:left时,他会找到所有左浮动的元素,让这个加有clear属性的元素的上边框?刚好挨着上述左浮动元素的下外边距的边界,直到该元素的左侧不再有左浮动的元素为止。利用clear的这个原理我们就可以解决上述的问题了。