1、標(biāo)準(zhǔn)流（文檔流/普通流）
- 默認(rèn)排版
- CSS的元素分為塊級(jí)硼身、行內(nèi)拇囊、行內(nèi)塊級(jí)
- 塊級(jí)是垂直排版，行內(nèi)靶橱、行內(nèi)塊級(jí)是水平排班
-
display屬性-
inline行內(nèi) -
inline-block行內(nèi)塊級(jí) -
block塊級(jí)
-
2寥袭、浮動(dòng)排版 float屬性
- 水平排版，只能設(shè)置元素左對(duì)齊或者右對(duì)齊
- margin：0 auto 無(wú)效
- 不區(qū)分塊級(jí)关霸、行內(nèi)传黄、行內(nèi)塊級(jí)元素
3、浮動(dòng)元素脫標(biāo)
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 150px;
background-color: burlywood;
}
- 標(biāo)準(zhǔn)排版會(huì)蓋住浮動(dòng)排版
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>
- 內(nèi)墻法
<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
- 超出標(biāo)簽的范圍的內(nèi)容裁剪掉，
- 也可以清除浮動(dòng)
- 讓里面的盒子設(shè)置margin-top之后佳遣，外面的盒子不被頂下來(lái)
