<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動具體表現形式</title>
<style type="text/css">
.class1
{
width: 300px;
height: 200px;
background: wheat;
/*float: left;*/
/*position: absolute; 定位屬性 可註釋float查看效果 定位是完全脫離文檔流,所以div3的一些文字被覆蓋了 但是float是半脫離文檔流 所以div3文字會自動環繞*/
}
.class2
{
width: 400px;
height: 300px;
background: yellowgreen;
float: right;
}
.class3
{
width: 500px;
height: 400px;
background: saddlebrown;
}
.a
{
width: 400px;
height: 300px;
background: yellowgreen;
float: left;
}
.b
{
width: 500px;
height: 400px;
background: saddlebrown;
}
.a1
{
width: 400px;
height: 300px;
background: yellowgreen;
float: left;
}
.b1
{
width: 500px;
height: 400px;
background: saddlebrown;
}
</style>
</head>
<body>
<!--1.如果當前元素時block元素且設置浮動，對後面block元素的影響
結論：
1.沒有設置浮動的元素會填充浮動填充遺留下來的空間
2.浮動元素會跟非蠕動元素髮生重合，浮動元素在圖層最上面
3.使用float脫離文檔流時，其他盒子會無視這個元素，但盒子裏面的內容依然會成爲這個浮動元素讓出位置，並且會環繞周圍。
<div class="class1">我是塊級元素1,設置了向左浮動</div>
<div class="class2">我是塊級元素2,沒有設置</div>
<div class="class3">我是塊級元素3,沒有設置11111111 11111111111111 1111111111111111111</div>-->
<!--
2.如果塊級元素設置了float屬性，對其後沒設置浮動的行元素或內斂塊級元素的影響。
結論：
b會緊跟在a的後面，並且b會更具自身內斂元素的特點來確定是否換行，常用於文字環繞。
<div class="a">我是塊級元素，且設置了float</div>
<span class="b">我是行內元素，沒有設置float</span>-->
<!--3.假如當前元素爲行內元素且設置浮動，對後面的未設置float的塊級元素的影響.
結論:行內標籤設置了float後，寬高可設置。
2.元素變成inline-block，脫離文檔流，原有空間被沒有設置的浮動元素佔據
<span class="a1">我是行內元素，並且設置了float向左</span>
<div class="b1">我是塊級元素，沒有設置浮動</div>-->
<!--4.假如當前元素時行內元素且設置了浮動，對後面爲設置浮動的行內元素的影響。
結論：b會緊跟a元素的後面，b元素會根據自身元素的特點來確實是否換行，常用語文字圍繞。
-->
<span class="a1">我是行內元素，且設置了float</span>
<span class="b1">我是行內元素，沒有設置浮動</span>
</body>
</html>
