父元素的高度为0,使用伪元素:清除空白后解决问题。
浮动布局将使父元素的高度为0。当高度没有设置时,它不会根据子元素的高度而变化。因此,我们必须设置清晰的属性并用伪元素替换空白标签。让页面布局栏经常使用浮点数:左/右,但是浮动布局的高度会导致父元素为0(不设置高度的情况),并且不会改变,根据子元素的高度除此之外,不需要想在后面浮动的后面浮动元素现在在tab显示下一行。
复制代码代码如下所示:
#内容{背景:# 000;}
。左{宽度:100px;身高:100px;背景:# EEE;保证金:0 10px;浮动:左;}
因此,当使用浮动布局(行元素无效)时,我们需要一个块级元素来设置清除属性,如果浮动元素下面有元素,那么我们可以直接在元素上清除:两者,如果不需要显示其他元素,我们倾向于写一个空白选项卡来移除浮动。
复制代码代码如下所示:
但这无疑会增加浏览器的渲染负担,所以考虑使用伪元素:在替换空白标签后,因为清除需要浮动回来,所以我们不能使用后::在以前,设置内容:
复制代码代码如下所示:
内容:#后{内容:;显示:块;明确:两;}
这种方法在IE6,7,和变焦无效:1设置#内容。