关于浮动的相关问题（一）

一、浮动定位

设计初衷：文字环绕

浮动会让控件脱离文档流

float：left、right、none

1.浮动定位可以把任何控件排列成一行，前提这行有足够的空间，如果没有足够的空间那么控件会换行排列

2.浮动定位会让处在相同之内的控件顶端对齐

3.浮动定位会过滤掉控件之间的空白，例如：

<img src="phtto1.png" />

<img src="phtto2.png" />

两个图片不采用浮动排列的时候，由于图片是内联模型，所以也能排列成一行，被浏览器合并成一个空白，所以导致第二个img标签前方存在多个空白，

这些空白会被浏览器合并成一个空白，所以导致两个图片排列的时候中间会有缝隙，解决的办法：两个img标签写成一行或者添加浮动

4.浏览器执行排版的时候，浮动流的优先级高于文档流

 

浮动定位引发的父控件高度坍塌（塌陷）：

1.产生的原因：

如果子元素使用css浮动定位，那么这些子元素就会脱离文档流，放入一个新的层面（图层）里面，文档流中的父控件将会因为没有子元素而产生高度坍塌。

一个控件产生了高度坍塌会引发很多排版上的问题，比如控件下方的内容会向上移动，被浮动的子元素所覆盖；另外控件与其它元素布局的时候外填充效果会起不到预期的效果。

2.解决的办法

(1)父控件设置具体高度

(2)父控件使用overflow：hidden; //最推荐

(3)父控件使用浮动定位

因为父控件和子元素都在新图层里面，所以父控件不会认为没有子元素，从而高度不会坍塌。

 

浮动方向：

分为向左浮动（left）、向右浮动（right）和不浮动（none），浏览器在处理浮动定位的时候是让控件元素浮动排列，而不是右对齐的效果。

 

消除浮动：

clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

务必记住这句话：“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”

浮动效果不存在继承关系，父控件设置了浮动效果默认不会被子控件继承

浮动排列规则：

元素在浮动排列的时候，在新的图层里无论向左向右浮动都是要贴到图层或者其它元素的边框。

如果元素的高度不一致，有可能出现换行的元素不会贴到图层的边框而是贴到元素的边框。

<div class="A"></div>

<div class="B"></div>

<div class="C"></div>

.A{

width:200px;

height:300px;

float:left;

}

.B{

width:200px;

height:200px;

float:left;

}

.C{

width:200px;

height:200px;

float:left;

}

上面代码运行的浏览器时候，如果父元素的高度调小一些，第三个div强制换行的情况下，这个换行的div会贴在

浏览器边缘。如果第一个div高度为300，第二个div高度为200，那么第三个div就不会贴在浏览器边缘，而是贴在第一个div的右边框。