清除浮动

1. 给盒子增加适当高度

当一个浮动元素被包含在另一个元素中,包含的元素没有高度就会被另外的浮动元素影响,如果这个和另一个元素有高度的话,浮动元素就不会互相受影响。

2 .清除法clear

清除的属性有clear:left;清除左边的浮动),clear:right;(清除右边的浮动),clear:both;(清除所有浮动),clear:none;(默认状态)。

用清除法会导致元素的外边距(margin)属性无法使用,会影响网页的效果。

3 .隔墙法

  • 内墙法

    在想要互不影响的两个浮动元素中的第一个元素的里面写一个小的元素,给上适当的高度,就会将前一个元素撑高,这样两个元素就不会互相影响。

    对于IE6会不兼容微型盒子,即高度小于12px的盒子,解决方式是将盒子的font-size设置为比想要所设置的盒子的高度小就可以啦并且font-size的表示方法如_font-size:0px;

  • 外墙法
    在两个好像影响的浮动元素之间 ,建一个盒子,就可以将两部分的浮动元素隔开,两部分的浮动就不会相互影响。两部分的间隙就是外墙的高度。这种方法的缺点是前一个包含框不会适应内容的高度。 内墙法会适应高度。

  • overflow:hidden;(IE6不支持,如果要使用需要配合使用_zoom:1;
    作用1:将溢出包含框的内容隐藏。
    作用2:清除浮动,并且元素的高会适应内容,margin可以使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值