CSS清除浮动原理(涉及BFC)和方法

最新推荐文章于 2024-02-01 23:00:41 发布

xxxspade

最新推荐文章于 2024-02-01 23:00:41 发布

阅读量3k

点赞数 2

分类专栏： CSS 文章标签： css 清除浮动

本文链接：https://blog.csdn.net/jlin991/article/details/60149824

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

为什么要清除浮动？？

首先理解浮动框：

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，
文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。
顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

导致了高度塌陷

为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

解决方法

1)添加额外标签

<div class="wrap" id="float1">
    <h2>1）添加额外标签</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <div style="clear:both;"></div>
    </div>
<div class="footer">.footer</div>

优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的

2)父元素设置 overflow：hidden

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
    <h2>3)父元素设置 overflow </h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
<div class="footer">.footer</div>

实质是触发BFC
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；

3) 父元素设置浮动

优点：不存在结构和语义化的问题，代码量少
缺点: 使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐。。

4) 父元素设置 display:table

也是触发了BFC
优点：结构语义化正确，代码少
缺点：盒模型属性已经改变。

5)使用:after伪元素

需要注意的是 :after是伪元素（Pseudo-Element），
不是伪类
不过csser要严谨一点，这是一种态度。

 .clearfix:after {
     content:"."; 
     display:block; height:0; visibility:hidden; clear:both; 
     }
.clearfix { *zoom:1; }

优点：结构和语义完全正确，代码量居中
缺点：复用方式不当会造成代码量增加

实际原理(后面解释BFC)

1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，有些版本可能content 里面内容为空,不推荐这样做的,firefox直到7.0 content:”” 仍然会产生额外的空隙；(bug！！)
5）zoom：1 触发IE hasLayout。

总结原理

原理其一，通过在浮动元素的末尾添加一个空元素，
设置clear:both，after伪元素也是通过content**在元素后面生成了内容为一个点(或” “)的块级元素**；
块级元素自然就能让行内元素下沉了，因为
一般受影响的是行内元素~或者父元素高度塌陷

其二,通过设置父元素overflow或display:table
原理就是触发BFC(Block formatting contexts)
块级格式化上下文！！！！

BFC

BFC的特性

BFC会阻止外边距叠加
一般情况，两个相邻的块级框，它们之间的垂直方向的外边距会发生叠加。如果这两个相邻的块框不属于同一个BFC就不会叠加！
2.BFC不会重叠浮动元素
一个BFC的边框不能和它里面的元素的margin重叠。
这意味着浏览器将会给BFC创建隐式的外边距来阻止它和浮动元素的外边距的叠加。
当给一个挨着浮动的BFC添加负得外边距不会起作用！
1. BFC通常可以包含浮动

触发BFC的条件

float除了none以外的值
overflow除了visible之外的值
display(table-cell table-caption,inline-block)
position(absolute,fixed)

display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。