浮动float的规则和常见的问题

浮动float的规则和常见的问题

规则

一、规则一

1.脱离标准流

2.向左或者向右移动，直到自己的边界紧贴着包含块（一般是父元素）或其他浮动元素的边界为止

二、规则二

浮动元素不能与行内级内容层叠，行内级元素将会被浮动元素推出

比如，行内级元素，inline-block元素，块级元素的文字内容，块级元素的文字内容

*利用此特性，可以轻松实现文字环绕功能

三、规则三

行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

四、规则四

如果元素是左（右）浮动，浮动元素的左(右)边界不能超出包含块的左（右）边界

五、规则五

1.浮动元素之间不能层叠

2.如果一个元素浮动，另外一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮动找左浮动右浮动找右浮动）

3.如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到右充足的空间为止

六、规则六

浮动元素的顶端不能超过父元素的顶端，也不能超过之前所有的浮动元素的顶端

常见的问题

一、层叠现象

.box1{
    width: 100px;
    height: 50px;
    background: red;
    float: left;
}
.box2{
    width: 200px;
    height: 100px;
    background: blue;
}
 .out{
  width: 400px;
 /*不设置高度，内部的子元素会将父元素撑开，子元素设置浮动就不能撑开*/
  background: green;
}

<div class="out">
    <div class="box1">我是box1</div>
    <div class="box2"></div>
</div>

1.box1浮动，box2不浮动，box2中无文字内容产生的现象

原因：box1浮动脱离标准流，不占据父元素的宽度，所以box2自动往上移

2.box1浮动，box2不浮动，box2中有文字内容产生的现象

<div class="box2">我是box2</div>

原因：box1浮动脱离标准流，不占据父元素的宽度，所以box2自动往上移，又因为浮动元素不能与块级元素的文字内容，块级元素的文字内容将会被浮动元素推出（规则二）

3.box1浮动，box2也浮动，box2中有文字内容产生的现象

.box2{
    float: left;
}

原因：box1，box2都浮动脱离标准流，1.浮动元素之间不能层叠，2.如果一个元素浮动，另外一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮动找左浮动右浮动找右浮动）（规则五）

4.box1浮动，box2也浮动，但是父元素的宽度不够两个子元素之和时

.box2{
    width: 350px;
    float: left;
}

原因：如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到右充足的空间为止（规则五）

5.box1浮动，box2也浮动，且box2后面还有一个box3，宽度为30px

原因：浮动元素的顶端不能超过父元素的顶端，也不能超过之前所有的浮动元素的顶端（规则六）即不能超过box2

6.文字环绕

6.1“出世；人们刚刚适应“,前面还有空隙

原因：box1设置的高度不是很合理，使得**“出世；人们刚刚适应“在排布时可以继续在右边显示，而下一行因为顶部被“出世；人们刚刚适应“**行占据了位置

7.对齐方式

.box1{
    width: 100px;
    height: 50px;
    background: red;
    display: inline-block;/*基线对齐，内联块设置了高度，基线效果更明显*/
}
.out{
    width: 400px;
    height: 400px;
    background: green;
}
span{
    float: left;
    background-color: blue;
}
strong{
    background-color: #00c8fa;
}

<div class="out">
    <span>电商或许是最适</span>
    <div class="box1"></div>
    <strong>宜诠释不确定性</strong>
</div>

电商或许是最适与宜诠释不确定性并没有对齐

原因：span浮动脱离了标准流，所以触发BFC结界，在顶部显示