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

2019-03-14 23:27:51刘景俊
.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清除浮动: