定義選擇往那個方向浮動、以往這個屬性總用於圖像(也適用於其他元素)，使文本環繞在圖像周圍（一半）,並且脫離了正常的文檔流，如果後面還有元素，該元素會被浮動元素覆蓋，加上這個屬性相當於display: inline-block
環繞特性
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.p > div {
float: left;
margin: 0;
font-size: 30px;
}
.p {
border: 1px solid red;
max-width: 30ex;
}
</style>
</head>
<body >
<div class='p'>
<div>2222</div>
11111111111111111111
111111111111111
1
</div>
</body>
</html>脫離正常的文檔流&display: inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div:nth-child(even) {
border: 1px solid red;
float: left;
width: 100px;
height: 20px;
}
div:nth-child(odd) {
border: 2px solid yellow;
width: 200px;
height: 20px;
}
</style>
</head>
<body >
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>