CSS清除浮动

浮动产生Bug原因：

当一个内层元素是浮动的时候，如果没有关闭浮动，其父元素就不会再包含这个浮动的内层元素，因为此时内层浮动元素已经脱离了文档流，而父元素还在文档流中，所以外层父元素不能被撑开了。

不浮动：　

.box{
    border: 1px solid red;
    margin:50px;
    color: #fff;
}
.d1{
    background: red;
    width: 100px;
    height: 100px;
}
.d2{
    background: #4c4;
    width: 100px;
    height: 100px;
}

<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div> 

浮动：

.box{
    border: 1px solid red;
    margin:50px;
    color: #fff;
}
.d1{
    float:left;
    background: red;
    width: 100px;
    height: 100px;
}
.d2{
    float:left;
    background: #4c4;
    width: 100px;
    height: 100px;
}

<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div> 

解决方法：(清除浮动)

1.利用:after伪元素清除浮动

原理：利用:after在父元素内（所有子元素的后面）插入一个元素块，从而达到清除浮动的效果。

.box:after{
    content: '.';
    height:0;
    clear: both;
    display: block;
    visibility:hidden;
}

.box{
    zoom:1;
}

2.使用带clear属性的空元素（跟:after大同小异，实现上略有区别）

<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="clearf">2</div>
</div> 

.clearf{
    content: '.';
    height:0;
    clear: both;
    display: block;
    visibility:hidden;
}

优点：简单，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

3.给浮动元素的邻接元素添加clear:both;

给浮动元素的邻接元素添加clear:both;即可清除浮动。

4.在父元素上设置一个新类名，然后在类名css中设置overflow:auto

原理：使用overflow属性来清除浮动，overflow有三个值：auto| hidden | visible，我们可以使用 hidden和 auto来清除浮动，但绝不可以使用 visible 清除浮动，使用这个值达不到效果。另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

<div class="box over-flow">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div> 

.over-flow{
    overflow:auto;
    *zoom:1;
}

5.给浮动元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

 

总结

清除浮动的方法可以分成两类：

1. 利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div （或者在邻接元素中添加clear:both;）来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

2. 触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使得该父元素可以包含浮动元素。

 

学如逆水行舟，不进则退

转载于:https://my.oschina.net/manitowei/blog/1573254