浮動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結界，在頂部顯示