vue学习 第七天 清除浮动 （clear：xxx）

　　　　　　　　　　　　　　　　清除浮动

问题一、父元素不方便设置高度，子元素设置浮动（不占位置），父元素的高度会默认为0，就会影响下面的标准流的盒子。

　　　　　总结： 子盒子浮动，父盒子失去高度，影响了整体布局
　　　　

1、清除浮动的原因

　　由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。这时就需要。清除浮动

2、清除浮动的本质

　　1）清除浮动的本质是清除浮动元素造成的影响。

　　2）如果父盒子本身有高度，则不需要清除浮动

　　3）清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

3、清除浮动的方法 

　　（1、额外标签法。 2、父级overflow：hidden    3、父级after伪元素    4、父级双伪元素）

　　语法：  选择器 { clear: 属性值; }

　　1）额外标签法（隔墙法），是W3C推荐的做法。增加一个块级元素，然后给它设置 clear:both
　　　

　　2）父级添加overflow属性.     (优点： 代码简洁。缺点：无法显示溢出的部分)
　　　

　　3）父级添加after伪元素  （额外标签法的升级：原理 用css生成后边的新标签）（优点： 没有增加标签，结构简单。 缺点：需要照顾低版本浏览器）

　　4）父级添加双伪元素（额外标签法的升级：原理 用css生成在父元素内部前后都增加新标签）（优点：代码更简洁。 缺点：需要照顾低版本浏览器）
　　　

4、清除浮动总结