一、CSS浮动
1、三个固定宽度与高度的框，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
2、文字围绕图片效果，当设置图片左浮动时，紧邻图片的行内元素将依次排开，与图片形成环绕效果。
3、浮动引发的问题
我们不定义框的宽度，然后再对1进行右浮动，我们看到内容多宽，容器就多宽，即：未定宽度的元素设定了浮动，元素的宽度会随内容变化，我们看到对1进行浮动之后，框2就受到影响，但框3并没有受到影响，设定了浮动的元素会对相邻元素即紧随其后的元素产生影响，使我们的布局变乱。
当父级元素包含的元素设置浮动时，我们发现父容器并没有把浮动的子元素包围起来，俗称塌陷。
二、如何清除浮动
1、利用 clear属性，清除浮动
2、使父容器形成BFC。
2.1 利用 clear属性，清除浮动
clear属性：clear 属性规定元素的哪一侧不允许其他浮动元素。
对紧邻浮动后的元素进行清除浮动，对其后元素设置clear属性
解决父级元素塌陷的问题：①添加空的div,设置clear属性
clear:left属性只是消除其左侧div浮动对它自己造成的影响，而不会改变左侧div甚至于父容器的表现，当子元素中有浮动和普通文档流元素，设置相应普通文档流元素clear属性就可以清除浮动；当子元素全是浮动元素时，我们在最后添加了一个非浮动的div，由于它有clear:left属性，所以它会按照左侧div不浮动来定位自己，也就是定位到下一行，而父容器看到有一个非浮动、普通流的子元素元素，会将其包围，这样造成了顺便也把三个浮动元素也包裹起来的效果，高度不再塌陷。
②clearfix技巧
“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。
为容器设置了一个类名“group”。在需要清除浮动的容器上添加这个类名“group”。
2.2使父容器形成BFC
BFC有三个特性
BFC会阻止垂直外边距（margin-top、margin-bottom）叠加
BFC不会重叠浮动元素
BFC可以包含浮动
我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC
float为left|right
overflow为hidden|auto|scroll
display为table-cell|table-caption|inline-block
position为absolute|fixed
我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果
网友评论