day8 浮动

初始浮动

浮动只会对后面的元素产生效果

float:left;

浮动：使元素脱出文档流（就是与不加浮动的元素不在一个层上），按照指定方向发生移动，遇到父级或同级浮动元素后停下

同级浮动宽度不够后会到第二行

浮动后特征，1、块级元素横排展示 

2、可以使行内元素变成块级元素，从而支持宽高

3、块级元素独占一行，不加宽时宽度100%，加上浮动后宽度100%默认变成默认内容展开

4、支持margin、padding   不支持margin:auto;

5、浮动提升后，与下层文本是一层

清除浮动

父级高度坍塌（父级元素不浮动，子级元素浮动）

1、直接给父级加上高度

2、用overflow:hidden （BFC机制 块格式化上下文，将自身看做一个独立的个体环境。）

3、在子级元素尾部加空元素

p{clear:both;}

因为clear:both；左右不能有浮动元素，然后就会自动换行  换到可视页面的最大高度，从而撑开父级元素

空元素是块级元素

4、伪元素清除

 在父元素后面加

.div:after{
        content:'';
        display:block;
        clear:both;
}