一、clear
clear 属性定义了元素的哪边上不允许出现浮动元素。并不是将浮动元素变成了非浮动的,而是将该元素左右的浮动元素放到下一行。
left :在左侧不允许浮动元素
right :在右侧不允许浮动元素
both :在左右两侧均不允许浮动元素
none:默认。允许浮动元素出现在两侧。
推荐使用伪元素方式清除浮动,代码如下
.clearfix{zoom: 1;/*zoom:1 触发IE hasLayout。*/&::after{content: " 111";display: block;clear: both;font-size: 0;height: 0;visibility: hidden;}}
after伪元素会在内容的最后加入元素,通过 content:"XXX" 生成内容作为最后一个元素,然后给该伪元素设置clear来清除浮动使父元素框撑开,设置伪元素为块级内容撑开剩余空间,同时使用visibility来隐去加入的内容。
二、bfc原理
也可以通过给父级元素增加overflow:hidden来清除浮动
使用这个方法即触发了bfc,bfc是什么呢?
BFC(Block Formatting Context )块级格式化上下文,是css布局的一个概念。是一块独立的渲染区域,里面的元素不会影响到外部的元素,外部的元素不会影响里面的元素。HTML标签就是最大的一个bfc区域。
BFC原理(布局规则)
内部的box会在垂直方向,从顶部开始一个接一个的放置box垂直方向的距离由margin决定,属于同一个bfc的两个相邻的box的margin会发生重叠每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此BFC的区域不会与float的元素区域重叠(清浮动)计算BFC的高度时,浮动子元素也参与计算
触发BFC的方式
根元素,HTML浮动,float的值不是none绝对定位元素 position的值为absolute或者fixed行内块 display为inline-block表格单元display为table,table-cell,table-caption等弹性盒 display为flex、inline-flexoverflow的值不为visible
bfc的使用场景
清除浮动自适应两栏布局去除margin重叠现象,分属于不同的bfc时,可以避免margin重叠
不推荐使用overflow来清除浮动的原因为,极有可能会导致超出的元素被隐藏,或者出现滚动条从而影响美观。