after加到浮动的父级里。
before加到浮动的下一级块级元素里。
.clearfix::after, .clearfix::before{
content: ' ',
display: block,
clear: both,
height: 0,
overflow: hidden
}
浮动元素下一个元素添加clear:both
<p style="float: left">浮动元素</p>
<div style="clear: both"></div>
BFC(块级格式化上下文)
1.高度规则(包含浮动元素高度)
为父级添加overflow: hidden
2.浮动元素的下一个元素与其重叠
为下一个元素添加overflow: hidden，添加间距用padding.
3.创建BFC
为父级添加overflow: hidden（ps:非visible的属性都可以实现）
浮动float
绝对定位position
非块级的快容器inline-block
4.BFC作用
清除浮动
防止margin折叠(内部折叠)(两个盒模型margin值会折叠重复(如上下都有100px 中间间距100px))
两栏布局（一部分浮动，一部分BFC）
网友评论