<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/*
塊元素在文檔流中預設垂直排列，是以這個三個div自上至下依次排開，是以想要一行排開的話，解決方案有：
1、行内塊元素，相當于文字，中間會有空格，可以把div緊密緊挨。用display：inline-block
2、如果希望元素在頁面中水準排列，可以使塊元素脫離文檔流
使用float來使元素浮動，進而脫離文檔流
可選值：
none，預設值，元素預設在文檔流中排列。
left，元素會立即脫離文檔流，向頁面的左側浮動。
right，元素會立即脫離文檔流，向頁面的右側浮動。
當一個元素設定浮動以後（float屬性是一個非none值）
元素會立即脫離文檔流，元素脫離文檔流以後，它下邊的元素會立即向上移動
元素浮動以後，會盡量向頁面的左上或右上浮動，直到遇到父元素的邊框或者其他元素。
如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素。
浮動的元素不會超過他上邊的兄弟元素，最多最多一邊齊。
*/
.box1{
width: 200px;
height: 200px;
background: red;
}
.box2{
width: 200px;
height: 200px;
background: skyblue;
}
.box3{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background: pink;
/*box1向左浮動
浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍。
是以我們可以通過設定浮動。
是以我們可以通過浮動來設定文字環繞圖檔的效果。
*/
/*
在文檔流中，子元素的寬度預設占父元素的全部
當元素設定浮動以後，會完全脫離文檔流，
塊元素脫離文檔流以後，高度和寬度都被内容撐開。
内聯元素脫離文檔流以後會變成塊元素
*/
float: left;
}
.p1{
height: 200px;
background: deeppink;
}
</style>
</head>
<body>
<div class="box1">
</div>
<p class="p1"></p>
</body>
</html>