css浮动和清除浮动

标签：style   blog   class   ext   c   http   

浮动存在的原因

在word排版中，文本可以环绕图片。在css中，想要实现文字环绕的效果，只能借助于float，没有其他的替代方式。在实际中，文档的布局经常会使用浮动。

float属性

float属性，默认为none，也就是标准流通常的情况。如果将float的属性的值设置为left或right，元素就会向其父元素的左侧或右侧紧靠。

inherit表示从父元素继承float属性的值。

clear属性

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。
在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的
上外边框边界刚好在该边上浮动元素的下外边距边界之下。
clear的默认值为none，允许浮动元素出现在两侧。left表示在左侧不允许浮动元素。right表示在右侧不允许浮动元素。both表示在左右两侧均不允许出现浮动
元素。inherit表示从父元素继承clear属性的值。

浮动带来的影响

1）宽度不会自动伸展，而是以内容为准。
2）脱离标准流，而独立存在。
3）对后边标准流的文字产生影响，而使文字环绕它排列。
4）容器中的子div都是浮动的，容器无法获取子div高度，不会自动伸展。如果想自动伸展，可以设置一个标准流的div，并且这个div清除浮动。

清除浮动的方法

所谓的清除浮动，准确的说法是清除浮动带来的影响。主要针对上面的第3点和第4点。
如果你很明确的知道接下来的元素会是什么，可以使用 clear:both; 来清除浮动。这个方法很不错，它不需要 hack，不添加额外的元素也使得它
有良好的语义性。
当然事情并不是都可以这样解决的，工具箱中还是需要另外几个清除浮动的工具。

1）空div方法

从字面来看，是一个空的 div。
。有时可能会用或者一些其他元素，但是 div 是最常用的，因为它没有浏览器默认样式；没有特殊功能，而且一般不会被 css 样式化。这个方
法因为只是为了表现，对页面没有上下文涵义而被纯语义论者嘲笑。诚然，从严格的角度来说他们是对的，但是这个方法有效而且没有任何伤害。

.clearfix {clear:both;}

2）overflow 方法

在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden，父元素就会扩展以包含浮动。这个方法有着较好的语义性，
因为他不需要额外元素。但是，如果需要增加一个新的 div 来使用这个方法，其实就和空 div 方法一样没有语义了。而且要记住，overflow 属性不是为
了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。
.fix{overflow:hidden; zoom:1;}

3）after伪类+content 方法

简单清除方法使用了一个聪明的 css 伪选择符(:after)来清除浮动。比起在父元素上设置 overflow，只需要给它增加一个额外的类似于”clearfix”的类。
这个类使用如下 css:
.clearfix{zoom:1;}
.clearfix:after{display:block; content:‘clear‘; clear:both; line-height:0; visibility:hidden;}

清除浮动的原理

Block Formatting Context可以很好地解释清除浮动的原理。

1）BFC的通俗理解：
　　Block Formatting Context（块级格式化上下文）是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
　　简单来讲，我们可以把它理解为，我们在进行盒模型布局的时候，如果一个元素符合了成为BFC的条件，该元素成为一个隔离了的独立容器，元素内部元素会垂直
的沿着其父元素的边框排列，和外部元素互不影响 。比如浮动元素会触发BFC，浮动元素内部的子元素主要受到该浮动元素的影响，而两个浮动元素之间是互不影响的。

　　在CSS3 中，BFC 叫做Flow Root。在早期的ie中也有类似的概念haslayout IE6、7的很多布局产生的bug（如3px间隙、绝对定位的继承宽度）都可以通过触发hasLayout
修复，比较推荐的方法为zoom:1与height:1%，不会破坏已有的样式，相信大家对它并不陌生。

　　同样的以往集中在float、绝对定位、margin collaspe中的很多困惑，在理解了bfc后，都能够被我们一一解除 。

2）BFC规范中的定义：
w3c规范对BFC的解释：
　　浮动元素和绝对定位元素，不是块级盒子的块容器 （如 inline-blocks, table-cells, 和 table-captions），以及设置了overflow属性（除了visible）的块级盒子 ，
都会为他们的内容创建新的BFC（块级格式上下文）。
　　在BFC中，盒子从顶端开始垂直地 一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距
会产生折叠。
　　在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

3）触发BFC的方法：
float 元素
position（absolute，fixed）
display (table-cell，table-caption，inline-block)
overflow 除了visible 以外的值（hidden，auto，scroll ）
fieldset元素
【注】CSS3中，将Block-formatting-contexts 叫做 flow root。对于触发方式也做了修改：The value of ‘position’ is neither ‘static’ nor ‘relative’；
那么在IE/win中，就依靠那个“hasLayout”了，

4）触发“hasLayout”的方法：
a.浮动元素
b.绝对定位元素
c.display:inline-block
d.zoom：比如常见的设置zoom：1；
e.width/height,比如设置height：1%的方法；
f.overflow/overflow-x/overflow-y [IE7 新增]；
g.max/min-width/height [IE7 新增]；

5）BFC的特性

边缘不和浮动元素重叠
不存在collapsing margins问题
　　第一个特性特别有用，因为元素触发了BFC的话，就不会被float元素覆盖，当子元素全部浮动的时候也能够正确地包含了
　　第二个margin不会叠加的特性，可以理解为两个处于普通流的盒子，会有margin叠加的问题，是因为他们属于相同的BFC，当他自身创建了一个新的BFC时，这个问题就不存在了

参考文章

http://kayosite.com/remove-floating-style-in-detail.html
http://www.qianduan.net/about-float.html
http://www.cnblogs.com/zorroLiu/archive/2011/04/12/2013901.html
http://www.cnblogs.com/v10258/p/3530290.html
http://www.w3school.com.cn/cssref/pr_class_float.asp
http://www.w3school.com.cn/cssref/pr_class_clear.asp

css浮动和清除浮动,布布扣,bubuko.com

css浮动和清除浮动

标签：style   blog   class   ext   c   http   

原文地址：http://www.cnblogs.com/yunfeichen119/p/3721063.html