float

一、float 的本质与特性

float本来是为了实现文字环绕效果而设计的，但是现在被用于设定宽高的砌砖头的布局方式，稍有改动就会样式错乱，所以建议：浮动是魔鬼，少砌砖头少浮动，更多的去挖掘css世界本身的流动行和自适应性

css2的重点还是图文展示，但是现在比较流行更为绚丽饿的诗句效果和更为丰富的网页布局，所以，flex弹性盒子布局出现，让 大家不得不去以自适应的方式实现布局

float又如下的特性：

• 包裹性 （float元素是里边子元素的最大值）

• 块状化并格式化上下文

• 破坏文档流

• 没有任何的margin合并

  注意： 不要指望在float元素下使用text-align因为float会默认的让元素的display变成block或者是table（float会将display：inline-table变成display:table）

二、float 作用机制

他有个著名的图恶性，让父元素的高度塌陷，大多数的场景下会影响正常的布局，但是要注意，这个让父元素塌陷不是缺点，不是bug，这个只是为了实现文字环绕效果才出来的，但是在今天的布局里是不需要float塌陷的，也因为这个特性可能会出现一些不一样的效果。

元素高度塌陷只是一个效果，还有另一个效果是‘行框盒子和浮动元素的不可重叠性’

    

        
我是文字，虽然我的兄弟元素img 已经float了，但是他并不会盖在我的上边，我绕着他走的
        
那如果我在block元素里边了呢？额···
    

image-20180515195105289.png

 
    

        

            

            框框的高度和图片的高度一样高，由于一些额外的原因，vertical-align等的原因，图片的高度高粗框框一丢丢，同时因为不覆盖原则，所以有一行空行是被环绕的
    

image-20180515201833104.png

所以，一般来说我们需要用一些干净的手段来清除浮动的影响；

三、 float更深入的作用机制

• 浮动锚点：float本身是流中的一个点，这个点本身并不浮动，表现起来更像是一个没有margin border padding的空内联元素
• 浮动参考：浮动元素对齐的参考的实体

 
    

        

            
我是一个非常长的,长到能够换行的标题元素，然后我们看看更多这个按钮在哪呢？理论上他是应该在我的后头头追加的更多
        
        
    

image-20180515210651840.png

float与流体布局

除了目录树，还有三栏布局如图：

 
    

        « 上一张
        下一章»
        
第十二章，this is test 

    

image-20180515212156267.png

四、float的天然克星 clear

Clear：元素盒子的边，不能和前面的浮动元素相邻

clear的值是这样的：

• none:浮动就浮动，我也没办法
• left：左侧不能浮动
• right: 右侧不能浮动
• both: 两边都不能浮动

left和both没什么卵用， 直接clear:both就好了

 
    

        

            
1
            
2
            
3
            
4
            
5
        
    

image-20180515214155108.png

clear的弊端：

clear只有在块级元素才是有效的，但是::after等为元素默认是内联等，所以借用::after的时候，需要设置display:block;

 .clear::after {
            content: "";
            display: block;
            clear: both;
        }

   

    
我理论上应该在右边怪怪的呆着，但是旁边突然出现了一个clear，
<这时候起我的其他文字就被挤下去了，其实换行后并没有真正的清楚浮动，只是换行了而已
    

image-20180515215449945.png

使用了clear有一些特性依然存在，就比如：

• 如果clear:both元素前边就是float那么，margin-top负值即使是-9999px也不会有任何的作用
• clear:both后边的元素依旧可能会发生文字环绕的现象

有时候父元素设置了clear:both组织浮动对其他元素的影响，但是最后错位依然还是有的，（就比如上图）

所以为了彻底清楚浮动，我们建议用BFC