CSS中浮动的作用与影响（包含清除浮动影响的方法）

今天来总结一下浮动

浮动(float)

作用:解决盒子并排问题

标准流: 一行一个 从左侧边界开始放置

浮动带来一个现象, 盒子并排放置 —> 脱离标准流 ,成为浮动流—> 不占界面位置

float:left / right /  none(默认值) ;

left: 找父元素的左边界停靠
right: 找父元素的右边界停靠
none: 保持原有的位置 标准流
每一个并排的盒子身上都要加浮动属性

影响

脱离标准流 ,成为浮动流—> 不占界面位置—> 导致其他盒子向上移动

父盒子的高度塌陷: 父盒子高度本来是由子元素撑开的,父亲的高度计算是从内容的高度得来的, 现在由于浮动元素不占位置,所以子元素高度无法计算,父盒子的高度就他塌陷了.

清除浮动的影响

现象:

1: 给父盒子定高 height

缺点: 不实际 实际中就是有时侯高度就是auto

2: 给父元素加overflow:hidden属性

触发BFC规则 (私人区域)

处于BFC规则的盒子 其外的元素不会影响到它,它内部的元素也不会影响其外的盒子

BFC规则说:只要是BFC盒子内部子元素浮动了,则父盒子会计算浮动子元素的高度

缺点: 会隐藏掉故意溢出的元素

3:css属性中 空标签法清除浮动影响

clear:left/right/both  clear:both 

属性必须依靠结构存在  ----> 必须写在body
<div style="clear:both"></div>  块级元素  可以清除
<span style="clear:both"></span>  行内元素  试了  不可以

空标签法 清除浮动影响 放置在所有浮动子元素之后

清除浮动影响的元素必须是块元素

缺点: 增加了无用(没有用户展示数据)空标签 导致文档树变大 ,结构冗杂

4:双伪元素法清除浮动影响

上面方法增加了空的结构标签 —-> 用css去创造这个空的结构标签

伪元素的写法: E 代表元素 
1: E::after {
    //作用是插入一个节点(块级元素,行内元素,行内块元素)到E元素所有内容之后
    
    content:' 文本内容';//设置伪元素的文本内容 
    
}
2: E::before {
    //作用是插入一个节点(块级元素,行内元素,行内块元素)到E元素所有内容之前
    content:'文本内容';
    
}

伪元素默认的显示模式是行内模式
最终方案:放到拥有浮动子元素的父元素身上即可

.clearFix::after,.clearFix::before {
    content:'.';
    line-height:0;
    font-size:0;
    height:0;
    display:block ;// 原因: 只有块级元素才能清除浮动影响
    clear:both ; 
}