css使元素脱离文档流 浮动

块元素在文档流中默认垂直排列。
要我们设置块元素水平排序，我们可以设置块元素为行内块元素或者设置块元素脱离文档流

float使块元素脱离文档流(浮动)

float
w3school上面这么解释

语法：
float:值
可能的值：

left	元素脱离文档流向左浮动。
right	元素脱离文档流向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

这是正常情况下块元素在文档流中的情况：

当使div2脱离文档流：

这里设置div2脱离文档流向右浮动，当他脱离文档流后他原来占的位置被后面的块元素占了，所以会影响页面布局

当设置了浮动，那么这个元素会尽力向左上或者右上方浮动，直到遇到父元素的边框或者其他的浮动元素，不会浮出父元素，当他脱离文档流后他原来占的位置被后面的块元素占了，而且会跟别的元素重叠

当浮动元素碰到其他的浮动元素也会停止浮动，而且，如果在文档流中，元素上面有其他块元素，因为块元素独占一行，那么当此元素浮动的时候，他如果碰到他们的边界也过不去

但是如果元素下面是块元素，那么当此元素浮动后，他下面的块元素会跑上来占着他的位置和他重叠就跟上面的例子一样

当多个浮动元素在同一行而且因为改变页面宽度而导致他们放不下的时候，他们就会变到不同行
这是正常情况下

当改变了页面宽度：



浮动元素不会浮动得超过他上面的兄弟元素

这里，黄色的右边空间大于50px但是因为红色的太大进不去，但其实绿色的可以进去，但是他没有进去，这就是他不会超过他上面的兄弟元素

当元素设置了浮动以后，会完全脱离文档流，当块元素脱离了文档流而且不设置宽高后，就会变成宽高由内容决定

使文本围绕在图片四周

虽说上块元素浮动，下面块元素会上来可能会相互覆盖，但是，下面的块元素中的文字不会被覆盖

类似于这样，我们可以用这个特性来设置文字围绕图片

内联元素脱离文档流

当内联元素脱离文档流后就会边得可以设置高了
所有类型元素脱离文档流后都会成一种类型的元素，特性一样

清除浮动对其他元素的影响

因为某个元素设置浮动之后，他下面的兄弟元素会占有他原来的位置，从而会改变页面布局，clear属性可以用来清除这种影响，使浮动元素的兄弟元素不会占有浮动元素的位置

即元素清除了某个浮动元素的影响后，这个元素就会回到浮动元素不浮动的时候这个元素应该处的位置
clear属性：

语法：
clear:值

可能的值

left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	清除对元素影响最大的浮动影响
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

即元素前面的兄弟元素向哪边浮动，我们这个元素就需要清除哪面的浮动。