一:清除浮动的原因

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

二:清除浮动的本质

  • 清除浮动的本质是清除浮动元素造成的影响。
  • 如果父盒子本身有高度,则不需要清除浮动。
  • 清除浮动之后,父级会根据浮动的盒子自动检测高度,父级有了宽度,就不会影响下面的标准流了
    语法:
选择器{clear: 属性值;}

属性值

描述

left

不允许左侧有浮动的元素(清除左侧浮动的影响)

right

不允许右侧有浮动元素(清除右侧的浮动的影响)

both

同时清除左右两侧浮动的影响

我们实际开发中,几乎只用clear:both

清除浮动的策略是:闭合浮动

三:清除浮动的方法

在这里就介绍以下额外标签法。

(1)简介:额外标签法也称隔墙法,是W3C推荐的做法。

额外标签法会在浮动元素末尾添加一个空标签,例如<div style="clear:both"></div>,或者其他标签。(如等)。

(2)方法的优缺点

  • 优点:通俗易懂,书写方便。
  • 缺点;加许多无意义的标签,结构化比较差。
    注意:要求这个新的空标签必须是块级元素。

注意:要求新的标签是块级元素。

                        css浮动2之清除浮动_清除浮动