注意:本篇僅供參考,當時寫這篇的時候還存在很多的問題。本文于2016-11-14編寫
7.1 一個冒牌的脫離標準流,浮動
浮動大家都很熟悉了,但我要說的是,它并不是真正的脫離標準流,請允許我慢慢道來。
一個常規的脫離標準流必須滿足以下條件:
- 不占據任何位置
- 不屬于任何元素
- 父元素無法自適應脫離標準流的元素(元素都脫標了,還能自適應那可能嗎,可能的話那就不是真正的脫標)
如果是這樣的話,下面的種種現象足夠證明。另外也可以說明它真的不是用來布局的,而是用來實現文字環繞的。
現象1:浮動蓋不住文字
<style>
body,div{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background-color:red;
}
.item1{
float:left;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
文字被掉下來了,這一點能夠說明浮動和文字有著不可密切的關系,也就是文字環繞。
現象2:浮動并不是真正的不占位置
<style>
body,div{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
}
.item1{
float:left;
background-color:red;
}
.item2{
display:inline-block;
background-color:pink;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
可以看到它其實還是占了位置的,實際上它只對后一個元素是塊級元素的時候才會蓋住它,之所以它會占不是塊級元素的位置是因為不是塊級元素,它是允許并排的,允許并排那么文字正好在它的右邊,另外你會可以發現,如果是用inline-block和inline中間會有幾像素的間距,但是用了浮動以后間距就沒了。這說明了文字和它的親密度。
現象3:浮動不允許我們手動調整層級
<style>
body,div{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
}
.item1{
float:left;
z-index:-999;
background-color:red;
}
.item2{
background-color:pink;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
可以看到我們設置的z-index根本就沒有用,因為它和定位有著天然的區別,一個是用來脫離標準流的,一個是用來實現文字環繞的。
現象4:父元素還是可以自適應浮動的元素的
<style>
body,div{
margin:0;
padding:0;
}
.box{
width:200px;
overflow:hidden;
border:1px solid #dedede;
}
.item{
width:100px;
height:100px;
float:left;
background-color:pink;
}
</style>
<div class="box">
<div class="item"></div>
</div>
加上一個overflow:hidden;完美自適應浮動元素高度。
為什么它只會蓋住塊級元素,并且不會蓋住文字?如果我們不給塊級元素設置寬度,你就會發現它的秘密。
<style>
body,div{
margin:0;
padding:0;
}
.item1{
width:100px;
height:100px;
float:left;
background-color:red;
}
.item2{
background-color:pink;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
可以看到它把文字往左邊移動了,并且移動的距離正是浮動元素的寬度,另外這也可以解釋為什么浮動不能手動創建層級,如果真的允許創建層級那問題就大了,那么沒有浮動的那個元素將在上面,那么文字究竟是放在哪里呢?放在浮動元素的右邊?那就成什么了,請自行腦補一下。
所以這些現象足夠說明浮動并不是一個真正的脫離標準流,要說是那也只是耍了點小把戲,另外一點更加確定的是它和文字環繞是一對的。
7.2 隱藏在body、html后面的神秘人物
你有沒有發現,給body設置背景顏色即使不設置寬高,背景也是占滿全屏的,你肯定會說,body的寬高默認100%,如果你這么覺得就錯了,不多說實戰出真知。
<style>
body{
background-color:pink;
}
</style>
這個你肯定不止一次的使用過,那這個究竟是不是body的背景呢?肯定不是,為什么這么說,如果你看了css單位的第一節100%單位,我想你應該還記得之前說過,body的高度是繼承html的,而html的高度是根據內容來的,如果沒有內容,那么它的高度為0,你說給一個高度為0的元素設置背景色會有用嗎,肯定是沒有用的,另外一點可以證明它絕對不是body的,我想你應該每天在寫這么一句話。
body{
margin:0;
padding:0;
}為什么要這么寫呢,因為它默認有一個margin,既然默認有一個margin,如果說這個背景真的是body的,那么肯定會有8px的間距。但是沒有,所以可以排除這個背景是body的,那么它是html的嗎?肯定也不是,看看這張圖就知道了。
可以看到默認html只有8像素的高度,這個高度是body默認的margin高度。因為父元素會自適應子元素的高度,除了脫離標準流的元素,還可以從另外一方面解釋。
<style>
html{
margin-top:50px;
border:10px solid red;
}
body{
border:10px solid green;
background-color:pink;
}
</style>
可以看到我們已經做的很絕了,但依然不影響背景顏色。
那么既然不是body,也不是html的,那么究竟是誰的呢?
我猜測它屬于整個文檔的,而這個文檔是我們是無法操作的,簡單來說,瀏覽器默認是沒有給這個文檔設置背景的,而一旦body或html設置了,它就會去捕獲這個背景,從而給這個文檔運用上去。
如果是這樣的話,那如果給body和html都設置背景,會用誰的呢?你應該猜到了
<style>
html{
background-color:red;
}
body{
background-color:pink;
}
</style>
正是html的。
以下這個情況,更加確定,在html以及body后面一直隱藏著一個神秘人物。
<style>
body{
display:none;
background-color:pink;
}
</style>
把body隱藏了居然還可以,但如果把html隱藏了,它的運氣就沒有那么好了。
<style>
html{
display:none;
}
body{
display:none;
background-color:pink;
}
</style>
白茫茫。或許它離我們并不遠,我想有一天它一定會浮出水面...
文章列表
