css中div不能被撑开高度不能自适应的问题

有时我们发现有些div总是不能根据内容自适应，父级元素高度只有一点点，但子元素很高，看起来就像裤子短了很长一截，检查半天也没有结果。面对着这种丑陋的情况，我们真的不知道该如何处理。
冷静下来，为什么会出现这种情况，难道是因为使用了浮动的原因吗？
确实是浮动能产生很好的效果，但是很多人忽略了浮动的细微性质，那就是浮动使一个块级元素与该层的其他元素游离开来，他漂浮在父元素的上面，父元素无法在视觉上包含他。虽然我们第一次接触float的时候，文档资料里面有提到，但是因为太细微了，往往被忽略了。
但是我们没法不使用浮动，为了解决这个矛盾，我们需要在使用浮动的时候同时在浮动的元素最后加上一个清除浮动的块级元素<div style="clear:both;"></div>
初级css技术人员可能会写css，但是细节上的东西，才能决定你能不能写出高质量的css