前端 -为什么要清楚浮动?

1 前提:

浮动元素----标准流的父元素都是要有高度。

所有的父盒子的标准流盒子都要有高度吗?

理想的情况是: 让子盒子撑开父亲,有多少孩子,父盒子就有多高!

但是就会有问题: 

父级盒子很多情况下,不方便给高度,但是子盒子浮动不占位置,最后父盒子高度为0,就会影响下面的标准流 的盒子。

浮动元素不占用原文挡的位置,就会对后面的元素排版产生影响。

2 清除浮动?

1为什么清除浮动?清除浮动后,父级就会根据子盒子自动监测高度。父级有了高度,就不会影响下面的标准流了。

清除浮动的本质 就是清除浮动造成的影响。

浮动元素 脱离标准流的影响。

如果父盒子本身有高度,则不需要清除浮动。

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

属性值 left, right, both同时清除左右两边的浮动影响!!!

一般只用clear: both。

闭合浮动!

清楚浮动 4个办法:

1 额外标签法。w3c添加推荐的语法。 

也叫隔墙法:

语法: 浮动的最后一个元素的末尾添加一个空的标签,

<div class='claer'></div>

或者<div style="clear:both"></div>,

优点: 简单,

缺点: 添加无意义的标签。不方便维护。

这个新的空标签必须是块级元素。 不能使行内元素!span不能!

2 父级添加 overflow属性

3 父级添加 atfer 伪元素。

4 父级添加 before after双伪元素法,

原文地址:https://www.cnblogs.com/hacker-caomei/p/13860892.html