学习中的问题：02浮动

浮动

什么是浮动？

最初的浮动是为了达到文字环绕图片的效果。现在在我们布局中有的时候会遇到一种问题，就是你想要让两个块元素排列在一行，可在标准文档流里这是不可能的，块元素会霸道的独占一行，我们可以用display：inline-block来解决这个问题。但是现在有了一个更好的方法，浮动。

浮动元素脱离文档流，在当前行的左边或是右边对齐，如果当前行没有足够的空间，它将下移一行，直到有足够的空间。浮动元素碰到包含它的边框或者其他浮动元素的边框停留。

浮动造成的问题

(1).父元素高度坍塌

当不给不元素设置高度，且父元素内只有浮动元素时，父元素的高度会无法被撑起

(2).浮动元素前有一个同一级的非浮动元素

若为行内元素：

当行内元素被撑起的宽度加上浮动元素的宽度，大于父元素的宽度时，浮动元素，就会下移一个line-height，直到计算的值小于父元素的宽度时，非浮动元素会跟随其后。

若为块元素：

浮动元素会在块内元素下一行进行浮动。

(3).浮动元素后面有一个同级非浮动元素

无论是行内还是块元素，都会紧跟其后。但是要注意一个问题，虽然浮动元素脱离文档流了，后面的其他元素会无视这个浮动元素，但是其他元素的文本依然会为这个浮动元素留出位置，环绕在周围，与之不同的是用position:absolute来脱离文档流，这个是彻底的，其他元素会彻底无视它。

清除浮动

(1).利用clear属性来清除浮动。

1.在浮动元素后面加一个冗余的空div，在这个div里面添加clear:both；属性。

2.对浮动父元素使用:after伪元素。

.clearFloat:after {  
    content:""; /*设置该区域的内容*/   
    display:block; /*把该区域转为block-level boxes 因为clear对该类型的box有效，伪元素:before和:after添加的内容默认是inline元素*/   
    clear:both;  /*清除浮动*/  
    visibility: hidden; /*不显示该区域,其实上面设置了content为空，这一行可以省略*/  
}   
/*bootstratp3.1.0 中 解决浮动问题的*/  
.clearfix:before,.clearfix:after{  
     display: table;  
       content: " "  
}  
.clearfix:after{  
    clear: both;  
}

(2).利用BFC(Block Formatting Content)块级元素上下文特性，BFC就是一个独立的盒子，不会与其他盒子发生折叠(即使元素浮动)。容器里面的子元素不会影响到外面的元素。对浮动来说重要的是：计算高度会将浮动元素也计算进去。就是这个特性。

BFC的触发条件：1.float。这里我们可以给父元素也设置浮动，但是这样会让父元素也脱离文档流，对布局有影响，不推荐。

                           2.overflow不为visible的值，如hidden。

                           3.绝对定位（absolute或者fixed）。

                           4.display的值为table-cell, table-caption, inline-block中的任何一个。