CSS浮动与浮动清除(BFC)简单教程
来源:懂视网
责编:小采
时间:2020-11-27 18:51:58
CSS浮动与浮动清除(BFC)简单教程
CSS浮动与浮动清除(BFC)简单教程:浮动1. 什么是浮动当元素的 float 属性不为 none 时就产生了浮动。<p class="float">float</p>.float { float: left; width: 100px; height: 100px; background-color: #ddd; }2. 浮动
导读CSS浮动与浮动清除(BFC)简单教程:浮动1. 什么是浮动当元素的 float 属性不为 none 时就产生了浮动。<p class="float">float</p>.float { float: left; width: 100px; height: 100px; background-color: #ddd; }2. 浮动

总结来说它要满足下列条件之一:
float
不为 none
position
不为 static
或 relative
display
为 table-cell
、table-caption
、inline-block
、flex
、inline-flex
overflow
不为 visible
只要给父元素加上以上任意一个属性满足条件,也就是给父元素加上 BFC 就能清除子元素的浮动。
CSS浮动与浮动清除(BFC)简单教程
CSS浮动与浮动清除(BFC)简单教程:浮动1. 什么是浮动当元素的 float 属性不为 none 时就产生了浮动。<p class="float">float</p>.float { float: left; width: 100px; height: 100px; background-color: #ddd; }2. 浮动