浮动造成的影响,清除浮动

原创 木鸟高飞 随笔 css 271阅读 2017-11-14 19:26:53 举报

浮动造成的影响
1、子类浮动,那么父类撑不开;
2、前面A元素浮动,后面B元素会跑到前面,前面A元素浮动在后面B元素上;
清除方式:
1、在浮动的元素后面加一个,
<div style="clear:both;"></div>
缺点:增加了多余的元素
2、给浮动的元素的父类加伪类:

parent:after{

content:'';
height:0;
display:block;
visiblity: hidden;
clear: both;
}
就可以了,推荐加伪类
3、直接让浮动元素的父类元素也浮动起来;

未完待续。。。。

评论 ( 2 )
最新评论
木鸟高飞 1F 2017-11-14 22:51:54 2F

是的,感谢评论与补充!
方法二补充

#parent:after{
display:block;
clear: both;
content:'';
/兼容其他浏览器/
height:0;
font-size:0;
overflow: hidden;
visiblity: hidden;
}
方法三:
父元素浮动、父元素定位非static;
方法四:
直接给父元素定义高度;

心理学徒幽灵聪 2017-11-14 19:45:00 1F

在世界上最伟大的浏览器IE6以下用第二种方法清除的时候需要加上font-size:0; 第三种方法就是神奇的BFC,父元素浮动或者position 非static都会触发BFC清除浮动。其实还有一种方法,直接给父元素高度让它撑起来
,真的,真的有用,哎呦我去,别打了。。。。。。