超详细浮动总结

浮动

1、float:

（1）left:左浮动（从左向右排列）；

（2）right：右浮动（从右向左排列）；

（3）none：不浮动；

（4）浮动可以使元素按照指定的方向排列，直到遇到父元素的边界或者另一个浮动元素【停止】；

（5）浮动会使元素脱离文档流；

（6）文档流：所有可见元素在文档中的排列占位（块级从上向下排，行内元素从左向右排列）；

2、浮动产生的问题：

（1）浮动脱离文档流，使父元素高度塌陷（无法撑开父元素）；

（2）影响浮动元素之后的布局；

3、清浮动（解决浮动产生的问题）：

（1）给父元素固定高度

缺点：不够灵活；

（2）给父元素加overflow:hidden

给visible以外的值都可以，存在溢出隐藏，滚动条的隐患；

（3）在父元素内部，浮动元素之后，定义一个空的，不浮动的，块元素{clear:both}

缺点：代码冗余，影响可读性；

（4）推荐方法

给元素的父元素加.clearfix

.clearfix:after{
content:'';
display:block;
clear:both;
}

4、浮动特性的总结：

（1）浮动会脱离文档流；

（2）浮动可以使块元素在一行排列；

（3）浮动使未定宽度的块元素适应内容；

（4）浮动使行内元素生成一个块级框（支持宽、高、垂直方向的padding/margin/line-height）

（5）浮动会提升元素层级；

（6）浮动会导致文本绕排（脱离文档流不脱离文本流）；

（7）浮动父元素包含浮动子元素不会出现高度塌陷；

（8）浮动子元素的margin值，不会出现margin值传递与塌陷问题；