流的破坏与保护
float属性
float的本质和属性
在float的设计之初,目的就是文字环绕效果
1、包裹性
在浮动元素中的元素包裹在浮动的元素中
2、自适应性
float的作用机制
让父元素的高度塌陷,在文字环绕效果的需求下,使父元素的高度塌陷,这样接下来的元素才可以实现文字环绕
高度塌陷,可以让浮动元素和跟随的元素处于一条水平线上
注意:行高盒子和浮动元素在同一平面不会发生重叠的特性
float与流动布局
float通过破坏正常的CSS流实现CSS环绕,但是可以用来实现布局
float的克星clear
clear:元素盒子的边不能和前面的浮动元素相邻
clear只有在块级元素中有效,但是伪元素一般都在在内联元素上,这就是为什么要设置display属性所在
BFC
BFC:块级格式化上下文
将元素封在一个特定的盒子中实现流体布局