浮动

一、为什么要浮动？

网页的布局其实就是摆放盒子。而盒子就是html中的各种标签，标签分三种：分别是块级元素、行内元素和行内块元素。但块级元素只能独占一行，自上而下排列；行内元素只能在一行显示，行内块元素虽然能在一行显示，并可以控制宽高，但行内块元素之间有间隙，且难以控制。

为了在网页内更灵活的摆放盒子，让块级元素能一行显示，易于排版，此时可以利用浮动来布局。

二、浮动的要求？

1.必须把要浮动的元素放在同一个div中。需要浮动的盒子，所在的父盒子，必须有足够的空间，否则盒子会掉下来

2.要浮动，所有的兄弟元素一起浮动；

3.右浮动的盒子一定要写宽度。

三、浮动元素的特点？

1.块元素浮动之后，脱离标准流，宽度和高度被内容撑开，宽度不再是父元素的100%。

而行内元素浮动之后，脱离标准流，变成块元素。

也就是说，元素浮动之后，脱离标准流，不占有原来的位置。

2.浮动之后的元素，会一直向父元素的最上方移动，直到遇到父元素的边框，或者其他浮动的元素，才停止移动。

3.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素。因为块元素独占一行，所以浮动元素会在他下面排列。

4.浮动元素不会超过他上边浮动的兄弟元素，最多一边齐，沿顶端对齐。

5.浮动元素不会覆盖文字，文字会自动环绕在浮动元素周围。所以可以通过浮动实现文字的环绕。

四、浮动带来的问题，以及解决方法？

1.浮动带来的问题？

①父元素在标准文档流中的高度，默认是被子元素撑开的。子元素浮动之后，脱离标准文档流，无法撑起父元素的高度，导致父元素的高度塌陷。

②父元素的高度一旦塌陷，所有元素的位置会上移，导致页面布局混乱。

2.清除浮动有四种方法：

①额外标签法

在最后一个浮动的子元素后面添加一个盒子

②父元素添加overflow：hidden属性

③父元素添加after伪元素

.clearfix:after {

content: "";

display: block;height: 0;

clear: both;

visibility: hidden;

}

.clearfix { /* IE6、7 专有 */

*zoom: 1;

}

④父元素添加双伪元素

.clearfix:before,.clearfix:after {

        content:"";

        display:table;

  }

.clearfix:after {

        clear:both;

}

.clearfix {

          *zoom:1;

}

最终写法：

.clearfix:before, .clearfix:after{

        content:"";

        display: table;

        clear: both;

}

如需要兼容IE6，写上.clearfix{zoom:1}