css清除浮动

清除浮动

清除浮动的方法在网络上有许多文章总结了. 我为了加深记忆, 就写一篇吧.
我最喜欢的清除浮动方法是, 使用.clearfix

<div class="father clearfix">
    <div class="left">child1</div>
    <div class="right">child2</div>
</div>
<style>
    .clearfix {
        content: "";
        display: block;
        clear: both;
        overflow: hidden;
        visibility: hidden;
    }
</style>

还有一种比较常见的便是用BFC方法. BFC是块格式上下文. 块格式化上下文包含创建它的元素内部的所有内容. 那么我们要想让父元素包住浮动元素, 只需要让父元素创建块格式上下文即可.
https://www.cnblogs.com/vitruvi/p/4303891.html

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://blog.csdn.net/sinat_31597631/article/details/54089973
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
https://blog.csdn.net/u012207345/article/details/78279961