1、標準流（文檔流/普通流）
- 默認排版
- CSS的元素分為塊級、行內、行內塊級
- 塊級是垂直排版，行內、行內塊級是水平排班
-
display屬性-
inline行內 -
inline-block行內塊級 -
block塊級
-
2、浮動排版 float屬性
- 水平排版，只能設置元素左對齊或者右對齊
- margin：0 auto 無效
- 不區分塊級、行內、行內塊級元素
3、浮動元素脫標
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 150px;
background-color: burlywood;
}
- 標準排版會蓋住浮動排版
4、隔墻法
- 外墻法
clear: both
<head>
<meta charset="UTF-8">
<title>隔墻法-外墻法</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: antiquewhite;
}
.box2{
background-color: darkgrey;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: magenta;
}
p{
float: left;
}
.wall{
clear: both;
height: 20px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
<p>我是文字3</p>
</div>
<div class="wall"></div>
<div class="box2">
<p>我是文字4</p>
<p>我是文字5</p>
<p>我是文字6</p>
</div>
</body>
- 內墻法
<body>
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
<p>我是文字3</p>
<div class="wall"></div>
</div>
<div class="box2">
<p>我是文字4</p>
<p>我是文字5</p>
<p>我是文字6</p>
</div>
</body>
5、overflow:hidden
- 超出標簽的范圍的內容裁剪掉，
- 也可以清除浮動
- 讓里面的盒子設置margin-top之后，外面的盒子不被頂下來
