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双伪元素法,