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

2019-03-14 23:27:51刘景俊
.div2:after{...}{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
显示效果如图8所示。(IE不支持,不用试了。==b)
图8:使用:after清除浮动
/web/css/format/clearFloat/clearFloat_08.gif
可以看到div2内的p3没有清除浮动,位置仍在div2的顶端。
增加div2的左边距,显示如图9所示。
.div2{...}{
margin-left:120px;
}
图9:增加div2的左边距
/web/css/format/clearFloat/clearFloat_09.gif
由此可见使用:after清除浮动,不适合于浮动元素后面还有不浮动元素的情况。
闭合浮动元素方法3
尝试方法3,使用overflow属性: