css复习——浮动与BFC

0710

浮动

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
浮动的值：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

浮动的特性
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流（不会撑开父级的高度——塌陷，坍缩）
5、阻止margin叠压

使用浮动要记得清浮动
1.加高
问题：扩展性不好

2.空标签清浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

3.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。

4.after伪类 清浮动方法（现在主流方法）
.clear:after{content:”;display:block;clear:both;}

.clearFix:after{
    content: "";
    display: block;
    clear: both;
}

BFC

来源
Block Formatting Context 块格式化上下文
触发BFC条件
float的值不为none
overflow的值不为visible
overflow
display的值为 table-cell、table-caption和inline-block之一
position的值不为 static或 relative中的任何一个
作用
包含浮动元素
不被浮动元素覆盖
阻止父子元素的 margin传递