关于浮动布局无法撑起父元素高度的问题(清除浮动)

在平常我们切页面的时候，浮动布局是相当常用的一种布局方式，几乎我们也离不开float。但是可能有些情况下父元素的高度我们是不能把高度写死的，比如文章内容，因为发布的文章内容多少是不固定的，把高度写死就会存在一些问题。然而，高度不写死我们如果用浮动布局的话，父元素的高度就无法被子元素撑起来(高度为0，padding排除)。

其实这个问题就是因为采用浮动布局使我们的元素脱离了文档流，所以才会出现上述的情况，那么下边我们直接放上清除浮动的css代码

.clearfix:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}

举个例子：

<ul class="clearfix"><li class="out-li"></li><li class="out-li"></li><li class="out-li"></li></ul>

这样的布局假如我们让li浮动左对齐，不给ul写高度，在不加clearfix这个class的情况下ul是不会有高度的。原因就是上边我们说的，那么我们加上clearfix这个class就成功的清除浮动了，这个代码不会有什么副作用。我们的ul的高度就会被li撑起了。

希望能解决大家的问题