乐趣区

关于css:css清除浮动的原理和方法

jiezi

1、革除原理

1.1、什么是浮动

官网说法是 浮动的框能够向左或向右挪动，直到它的外边缘碰到蕴含框或另一个浮动框的边框为止。

因为浮动框不在文档的一般流中，所以文档的一般流中的块框体现得就像浮动框不存在一样。 详情请看官网。
最后人们应用浮动是为了实现图文盘绕的成果，但起初在为了实现某种布局的时候也会用到浮动，然而以此又会产生典型的问题，那就是 影响兄弟元素的地位以及父元素高度塌陷。

1.2 浮动成果

如果兄弟元素是块级元素，则会被浮动元素遮挡，如果是内联元素，则会尽可能围绕浮动元素。

1.2.1 图文盘绕：
<div class="box">
    <img class="picture" src="bg.jpg">
    <p> 盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字 </p>
</div>
.box {
    width: 400px;
    border: 1px solid #333;
}
.picture {
    width: 50px;
    height: 50px;
    float: left;
}

1.2.2 兄弟元素被笼罩
<div class="box">
    <img class="picture" src="bg.jpg">
    <div class="sibling"> 兄弟 1 </div>
    <div class="sibling"> 兄弟 2 </div>
    <div class="sibling"> 兄弟 3 </div>
</div>
.sibling {
    background: red;            
    width: 170px;
    height: 50px;
}


兄弟 1 被浮动的图片遮挡住了，然而文字还是盘绕成果，强不强？

1.2.3 父元素高度塌陷
<div class="box">
    <img class="picture" src="bg.jpg">
    <div class="son"></div>
</div>
.picture {
    width: 50px;
    height: 50px;
    float: left;
}
.son {
    background: red;            
    width: 50px;
    height: 50px;
    float: right;
}


很显著后两种成果不是咱们想要的，所以咱们就要想方法解决掉～

2、如何革除

2.1 原理

clear 属性 定义了元素的哪边上不容许呈现浮动元素。在 CSS1 和 CSS2 中，这是通过主动为革除元素（即设置了 clear 属性的元素）减少上外边距实现的。在 CSS2.1 中，会在元素上外边距之上减少革除空间，而外边距自身并不扭转。不管哪一种扭转，最终后果都一样，如果申明为右边或左边革除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

1）革除浮动：也就是咱们常说的 clear 属性，对应 CSS 中的属性是 clear：left | right | both | none；
2）闭合浮动：更确切的含意是使浮动元素闭合，从而缩小浮动带来的影响。
当初革除了浮动，然而，这只是革除了浮动对于兄弟元素的影响，而高度塌陷的问题还没有解决，因而，咱们须要更高级的革除浮动——闭合浮动。

为什么叫闭合浮动？因为浮动的元素脱离了一般流，因而对于它的父元素，它并没有闭合，这时候就须要闭合浮动了。

3.2 办法

办法一：应用空 div, 这个大家都晓得，会产生没有意义的标签；
办法二：给父元素加 overflow：hidden, 利用的是 bfc 原理，毛病是对于须要超出父元素的局部会被截取，所以这种办法要视状况而定；
办法三：应用 after 伪元素，不生成理论的 dom 还能满足需要，多好～。

<div class="box">
    <img class="picture" src="bg.jpg">
    <p> 盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字盘绕的文字 </p>
</div>
.box:after{
    content: '';
    display: block;
    clear: both;
    *zoom: 1;/* IE6- 7 不反对:after 需触发 hasLayout */             
}

参考资料：
http://www.iyunlu.com/view/cs…
https://blog.csdn.net/wangjia…

退出移动版