css Float,Clear,Clearfix

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Float,Clear,Clearfix相关的知识,希望对你有一定的参考价值。

/*
When child elements (boxes) are floated, the parent is unable to determine
its height and collapses to the height of non-floating content.
<div class="container" style="background:orange">
  <div class="child"> <img src=''> </div>
  <div class="child"> </div>
</div>

Workaround: if we add some content, you will see the container regains its height 

.container :: after {
content: 'M';
}
But ofcourse, thats not an ideal solution

Ideal solution is add a class "clearfix" to the container element
which adds empty content before & after child elements
*/
.clearfix:before, .clearfix:after {
content : " ";
display: table;
}
.clearfix:after {
clear: both;
}

/* Note: Flex layouts don't have this problem and need no work around*/

以上是关于css Float,Clear,Clearfix的主要内容,如果未能解决你的问题,请参考以下文章

解读浮动闭合最佳方案:clearfix

清除浮动clearfix

css清除浮动clearfix:after的用法详解(转)

css布局属性clear和clearfix

仿写知乎页面小结

div标签清除float浮动样式方法