上任鹅城
0%

清除浮动的几种方式

Posted on Edited on In Views: Valine:
  1. 额外标签法：在最后一个浮动标签后，新加一个标签，给其设置clear：both；

  1. 父级添加overflow属性：父元素添加overflow:hidden/auto;

  2. 使用after伪元素清除浮动：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        clear:both;
    }
    .clearfix{
        zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

  1. 父级div定义height；

  2. 父级div也一起浮动；

追本溯源

1.为什么要用浮动？

以前提出浮动的概念，主要是为了解决左边图片右边文字的需求，后来浮动在网页布局上应用比较广泛。

2.什么情况又要清除浮动？

当子元素都设置浮动之后，而父元素本身又没有设置宽高（设置浮动前宽高是由子元素撑起来的），会导致父元素的高度塌陷，原来被撑起来的height被置为0，最终就会影响父元素的布局。

说到底，就是因为所有的子元素都浮动，会导致父元素高度坍塌影响布局。在这种情况下，就要清除浮动。