一:清除浮动的原因
由于父盒子在很多的情况下不方便给高度,但是盒子浮动又不占位置,最后父级盒子高度为0时,就会对下面标准流盒子造成影响。
二:清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响。
- 如果父盒子本身有高度,则不需要清除浮动。
- 清除浮动之后,父级会根据浮动的盒子自动检测高度,父级有了宽度,就不会影响下面的标准流了。
语法:
选择器{clear: 属性值;}
属性值 | 描述 |
left | 不允许左侧有浮动的元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧的浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
我们实际开发中,几乎只用clear:both;
清除浮动的策略是:闭合浮动。
三:清除浮动的方法
在这里就介绍以下额外标签法。
(1)简介:额外标签法也称隔墙法,是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空标签,例如<div style="clear:both"></div>,或者其他标签。(如等)。
(2)方法的优缺点
- 优点:通俗易懂,书写方便。
- 缺点;加许多无意义的标签,结构化比较差。
注意:要求这个新的空标签必须是块级元素。
注意:要求新的标签是块级元素。