CSS:闭合元素和浮动元素的差别

2020-05-14 07:37:27易采站长站整理

闭合浮动元素方法1
此时,div2的高度只包括其内未浮动元素的高度,因此使用第1种方法闭合浮动元素,为浮动元素后面的元素p3设定clear属性:

.div2p3{…}{
clear:left;
}

此时显示如图4所示,在IE中如图5所示。
图4:p3清除浮动后的效果

/web/css/format/clearFloat/clearFloat_04.gif

图5:p3清除浮动后IE内的效果

/web/css/format/clearFloat/clearFloat_05.gif

(啊!伟大的IE,居然多出来与div2的margin一样多的间隙。==b)
此时如果为div2增加左边距(原设定为margin:5px):

.div2{…}{
……
margin-left:120px;
}

则显示如图6所示,在IE中如图7所示。
图6:增加左边距后的效果

/web/css/format/clearFloat/clearFloat_06.gif

图7:p增加左边距后IE内的效果

/web/css/format/clearFloat/clearFloat_07.gif

至此的效果,是左右2栏布局常用的方法,左栏固定宽度,右栏不设定宽度以求能自适应。

闭合浮动元素方法2
尝试方法2,利用:after清除浮动:

.div2:after{…}{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}