float(浮动 left/right/none):
1.使内嵌元素支持宽高
2.使块元素在一行显示
3.不设置宽度的时候,宽度由内容
4.脱离文档流
浮动原理:
使元素脱离文档流,然后按照指定的方向去移动,直到碰到父级的边界,或者另外一个浮动元素停止
文档流:文档流是文档中可显示对象在排列时所占用的位置。
BFC ( Box Formatting Context) 块级格式化上下文
inline formatting context 行内格式化上下文
BFC 作用
1.清除内容浮动
2.阻止margin向外传递
触发BFC的条件:
1.根节点
2.float不为none的情况
3.display的值为inline-block、table-cell、table-caption
4.overflow的值不为visible
5.position的值为absolute或fixed
清浮动的方法:
1.给同为父元素设置 float
2.给父元素设置display:inline-block;
3.给父元素设置overflow不为visible(默认值) 一般设为auto;
4给父元素加个样式(加入clear){ :after{content:"";display:block; clear:both;} 目前最流行的方法;}