做测试题的时候遇到了一个关于BFC的题目,what?什么是BFC,然后我赶紧上网查阅了各种文章以及博客,自己又动手实践了。终于把浮动和清除浮动以及BFC的问题搞清楚了,捋一下思路,总结在一起,对浮动问题有疑问的以及不了解BFC是什么的看过来喽!
- 注意:如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。另外,假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
二、浮动带来的布局问题
浮动虽然可以便于页面布局,但使用浮动会产生一些问题:最常见的问题如下
1、影响它的兄弟元素的位置:具体的影响方式要看兄弟元素是块级元素还是内联元素,若是块级元素,会无视这个浮动的块框,使得自身尽可能与这个浮动元素处于同一行,导致被浮动元素覆盖,除非这些div设置了宽度,并且父元素的宽度不足以包含这个兄弟元素,兄弟元素才会被强制换行;若是内联元素,则会尽可能围绕浮动元素
浮动元素对块级兄弟元素的影响
<style>
#box{width:700px; height:70px; border:1px solid #000; padding:10px; color:#fff; line-height:70px;}
.bro1{ width:400px; float:left;}
.bro2{background:blue;}
</style>
<div id="box">
<div class="bro1">我设置了左浮动 float: left ,但没有设置背景色。</div>
<div class="bro2">我没有设置浮动,设置了蓝色背景色。</div>
</div>
2、它的父元素会产生高度塌陷(当父元素没有设置高度的时候)。
浮动元素的内联兄弟元素与高度塌陷
<style>
#box{width:800px; border:1px solid #000; padding:10px; color:#fff; }
.bro1{ width:400px; float:left; background:#ff9900; height:40px; line-height:40px; margin-left:20px;}
.bro2{background:blue;}
</style>
<div id="box">
<div class="bro1">我设置了左浮动 float: left ,并设置橙色背景色。</div>
<span class="bro2">我是 span ,没有设置浮动,设置了蓝色背景色。</span>
</div>
显然,我们使用浮动的初衷是为了让布局更简单,但显然这不利于布局,因此我们需要想办法清除这些影响,那么下面我们就聊聊怎么清除浮动嘞
浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的“副作用”。而一个元素设置了浮动(即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值)的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷,下面对这两个问题展开说明。
清除浮动常见的方法,大的方面分为两点:1、使用clear清除浮动2、触发BFC(后面会详细详细的聊聊滴)
细分如下:
1、使用clear,它的值可以是(both,left,right,none,inherit),分别代表在元素左右两侧不允许出现浮动元素,左侧不允许出现浮动元素,右侧不允许出现浮动元素,不清楚浮动,继承父元素的值。至于要用哪一个要视情况而定(后面两个不怎么用)
2、加入空div的方法(在浮动元素和不想让浮动元素之间插入一个空的div,然后对其设置clear:both),其实还是使用clear:both。空div方法很方便,但是加入了没有涵义的 div,这违背了结构与表现分离的原则,并且后期维护也不方便。
3、overflow方法。在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ,可以闭合浮动。只是 overflow 并不是为了闭合浮动而设计的,因此当元素内包含会超出父元素边界的子元素时,可能会覆盖掉有用的子元素,或是产生了多余的滚动条。这也是在 overflow 方法诞生后依然需要寻找更佳方法的原因。
4、使用after + zoom方法(此处内容借用张鑫旭博客的说法)
content:'clear both';
没问题,或是content:'张鑫旭'
也是ok的。于是有:
.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
这里的line-height:0写成height:0也是可以的。显然,相对来说,这个办法不但完美兼容主流浏览器,并且也很方便,使用重用的类,可以减轻代码编写,另外网页的结构也会更加清晰。
下面是我写的代码
<style>
div {padding: 15px; color: #000; }
.left{float:left;}
.main{background:red; width:400px;}
.aside{background:#ff9900;}
.clearfix {zoom: 1; border: 1px solid #9a9a9a; width:800px; }
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
</style>
<div class="clearfix">
<div class="main left">我设置了左浮动 float: left</div>
<div class="aside left">我是页脚,但是我也设置了左浮动。</div>
</div>
效果如图(content,display,clear不可少)
当然清除浮动的方法不止上面几种,我们说过,利用BFC特性,触发BFC并清除浮动都是可以的。
结合语义化的要求,在实际的项目中,可以使用 overflow 方法或 :after 伪元素方法。使用 overflow 方法,较为方便,在如内部元素全部为浮动元素,并且内容不会超出父元素框等情况可以直接采用 overflow 方法,但该方法毕竟会触发 BFC ,BFC 的特性是有多个的,为了避免不必要的影响,如果实际需要清除浮动元素的布局比较复杂,可以直接采用 :after 伪元素方法。
四、BFC下面我们来聊聊BFC(Block Formatting Context):块级格式化上下文,从样式上看,它与普通的容器没有什么区别,但是从功能上,BFC可以看做是隔离了的独立容器,容器里面的元素不会再布局上影响到外面的元素,并且,BFC具有普通容器没有的一些特性。
通俗的解释一下:BFC相当于一堵围墙,当你触发了一个元素的BFC,那么就相当于在这个元素的四周建立起了一堵围墙,那么这时候围墙里的元素和外面的元素就不会产生相互影响
所以触发BFC的条件
- 浮动元素:float除了none以外的值
- 使用定位,position(absolute,fixed)
- display为inline-block,table-cells,table-captions其中之一的值
- overflow除了visible以外的值(hidden,auto,scroll)
- flex boxes(元素的display:flex或inline-flex)
BFC的特性:
- BFC会阻止外边距折叠:我们知道两个相连的div在垂直上的外边距会发生折叠(这里涉及到外边距折叠的知识点,不太了解外边距折叠原理的请点击css外边距折叠原理),当我们触发了BFC的时候,就阻止了外边距折叠
- BFC可以包含浮动的元素:(解决因为浮动导致的高度塌陷问题)这里就是使用了overflow:hidden/auto方法闭合浮动的原理。W3C 的原文是“'Auto' heights for block formatting context roots”,也就是 BFC 会根据子元素的情况自动适应高度,即使其子元素中包括浮动元素。但是 IE6-7 并不支持 W3C 的 BFC ,而是使用自产的 hasLayout 。从表现上来说,它跟 BFC 很相似,只是 hasLayout 自身存在很多问题,导致了 IE6-7 中一系列的 bug 。触发 hasLayout 的条件与触发 BFC 有些相似
- BFC可以阻止元素被浮动元素覆盖:浮动元素的块状兄弟元素会无视浮动元素的位置,尽量占满一整行,这样就会被浮动元素覆盖,为该兄弟元素触发 BFC 后可以阻止这种情况的发生。
嗯,分享结束