04-CSS float 浮动

float 的本意是什么
+ 浮动出现的意义其实只是用来让文字环绕图片而已
浮动的本质是什么
+ 浮动的本质： 包裹 破坏

1. 浮动的“包裹性”

    div style="border:4px solid blue;">
                <img src="./timg (2).jpg" />
            </div>
            <div style="border:4px solid red;float:left;">
                <img src="./timg.jpg" />
            </div>

效果图：

所谓包裹性一目了然。
+ block 元素不指定 width 的话，默认是100%
+ block 元素浮动起来，具备像 display:inline-block 属性的特征： 盒子具有包裹性，盒子的宽度随内容的宽度自适应，并且可以在一排显示

在加一个并列的 div,效果如下：

• 浮动的“包裹性”一目了然：水平方向上，边框宽度紧贴内部元素。
• 这里的float:left;改成display:inline-block;最后实现的效果基本上就是一样的。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。对象呈递为内联对象就是元素呈递为 inline box，所以浮动“包裹性”所产生的结果就是使得元素转为了line box模型中的inline box元素。

可以看到效果和 display:inlink-block 很像，不同的是 display:inline-block 不能指定方向 而float可以指定方向

浮动的“包裹性”让元素变成类似于inline box的元素，而浮动的“破坏性”正是破坏inline box元素的，对于block水平的这类块状元素需要先让其变成类似效果的内联元素，然后再破坏

2. 浮动的“破坏性”
+ 文字之所以会环绕含有float属性的图片时因为浮动破坏了正常的line boxes。
先看下面一段普通的HTML代码：

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

`````
这段HTML代码涉及到4种boxes：

![这里写图片描述](https://img-blog.csdn.net/20170915151253915?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvV2luU29sc3RpY2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

![这里写图片描述](https://img-blog.csdn.net/20170915151539480?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvV2luU29sc3RpY2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

![这里写图片描述](https://img-blog.csdn.net/20170915151549746?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvV2luU29sc3RpY2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

1、首先是p标签所在的containing box，此box包含了其他的boxes；

+ 如果外部含 inline 属性的标签（行内元素）则属于 inlineboxes,如果是文字，则属于 匿名inline boxes。
+ inline boxes会让元素排成一行显示，即使是块元素
+ 在containing boxes里，一个一个的 inline boxes 组成了 line boxes。这是浮动影响布局的关键box类型
+ content area 是一种围绕文字看不见的 box。content area 的大小与font-size大小相关。

**正常的图文混排**
默认情况下，图片与文字混排应该是这个样子：图片与文字基线对齐，图片与文字在同一行上，如下图所示：
![这里写图片描述](https://img-blog.csdn.net/20170915152645319?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvV2luU29sc3RpY2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

+ 图片为一个 inline boxes，两边的文字也是 inline boxes。
+ +inline boxes 的高度是由其内部最高的 inline boxes 的高度决定, 这里 line boxes 的高度就是图片的高度。
+ 此时图片与文字是同一box类型的元素（都是inline boxes），是在同一行上的，所以，默认状态下，一张图片只能与一行文字对齐。
而要想让一张图片要与多行文字对齐，您唯一能做的就是破坏正常的 line boxes 模型。

**含有浮动属性的图片与文字**

![这里写图片描述](https://img-blog.csdn.net/20170915153348057?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvV2luU29sc3RpY2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

+ 正常情况下，图片自身就是个inline boxes，与两侧的文字 inline boxes 共同组成了 line boxes
+ 图片加入了浮动后，图片的inline boxes被破坏了。就无法与 inline boxes 的文字排在一行了
+ css 模型的高度可以理解为显示高度和隐藏高度。显示高度：box盒模型 height+padding+margin，隐藏高度如： img 图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到”height”这个； 或者是文字的 line-height当我们只给文字设置字体大小的时候实际上它也存在一个height。

inline boxes 的高度直接受 line-height控制（改变 line-height 文字拉开或重叠就是这个因），而真正的高度表现则是由每 line boxes 里内部最高的 inline boxes 决定。
而这些 line boxes的 高度垂直堆叠形成了 containing box 的高度，也就是我们见到的 div 或是 p 标签之类的高度了。

所以，对于 line box 模型的元素而言，没有 inline boxes，就没有高度了

而浮动却恰恰破坏了元素的 inline boxes inline boxes是高度形成的基础，于是这些元素也就没有了高度.
虽然图片实际占据的高度为0，但是由于其宽度实体存在（包裹性），同样是content area 实体的文字不会与之重叠。

浮动破坏了图片的 inline box，产生了两个结果：
1. 图片无法与文字同行显示，脱离了其原来所在的 line box 链；
2.没有了高度（无inline box -> 无line box -> 无高度）

**浮动会破坏元素的高度，造成：高度塌陷**
+ 如果元素本身没有高度，给他内部的子元素设置浮动，那么元素的高度为0


**解决高度塌陷的问题 – 清除浮动**
为什么会高度塌陷？
    塌陷原因是：元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。什么时候会塌陷：
    当标签里面的元素只要没有实际高度时会塌陷。


下面就来讲讲如何清除浮动，zxx:写到这儿，一下子轻松了。
IE下清除浮动准则很简单，使元素haslayout就可以了。？我不会
简单的方法： 给父容器设置： 
1. clear:both;
2. overflow:hidden; zoom:1;
    + 这个方法在 margin 设置成负值的时候用受影响
3.使用伪元素清除




<div class="se-preview-section-delimiter"></div>

ele:after {
content: “”;
height: 0;
line-height: 0;
display: block;
clear: both;
xisibility: hiddren;
}
ele {
zoom:1 //兼容ie浏览器
}

4. 使用双伪元素清除浮动：




<div class="se-preview-section-delimiter"></div>

ele：befor, ele:after{ }
“`

float 与 js
不能使用 obj.style.float=”left”;这样的句子。得使用其他写法。

IE浏览器：
obj.style.styleFloat = “left”;
其他浏览器：

obj.style.cssFloat = “left”;