浮動(dòng)存在的問題
①浮動(dòng)的元素不能撐高父親瞒大，高度不能自適應(yīng)
②浮動(dòng)的元素會(huì)影響后面浮動(dòng)的元素
例：
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box">
<p>5</p>
<p>6</p>
<p>7</p>
</div>
.box{
width:1000px;
border: 5px solid #000;
margin-bottom: 10px;
}
.box p{
width:100px;
height: 100px;
margin-right: 10px;
background-color: pink;
float: left;
}
效果：
……………………………………………………………………………………
清除浮動(dòng)的影響
①給父盒子設(shè)置高度
例：
.box{
width:1000px;
height: 120px;
border: 5px solid #000;
margin-bottom: 10px;
}
效果：
解決：對后面浮動(dòng)的元素的影響；margin可以生效
沒解決：高度不能自適應(yīng)
②給后面浮動(dòng)的元素加clear屬性
clear：清除浮動(dòng)的影響
屬性值：
left：清除左浮動(dòng)的影響
right：清除右浮動(dòng)的影響
both：清除左右浮動(dòng)的影響
例：
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box2">
<p>5</p>
<p>6</p>
<p>7</p>
</div>
div{
width:1000px;
/*height: 120px;*/
border: 5px solid #000;
margin-bottom: 10px;
}
div p{
width:100px;
height: 100px;
margin-right: 10px;
background-color: pink;
float: left;
}
.box2{
clear: both;
}
效果：
解決：對后面浮動(dòng)的元素的影響
沒解決：高度不能自適應(yīng)；margin不能生效（盒子有高度或者margin值比盒子還大才能生效）
③外墻法
隔墻法有兩種纠脾，分別是外墻法和內(nèi)墻法添吗。
外墻法：在兩個(gè)父盒子之間加一堵有高度醋火、清除了浮動(dòng)的墻虽画。
例：
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="cl"></div>
<div class="box2">
<p>5</p>
<p>6</p>
<p>7</p>
</div>
div{
width:1000px;
/*height: 120px;*/
border: 5px solid #000;
margin-bottom: 10px;
}
div p{
width:100px;
height: 100px;
margin-right: 10px;
background-color: pink;
float: left;
}
/*.box2{
clear: both;
}*/
.cl{
height: 10px;
clear: both;
border:none;
}
效果：
解決：對后面浮動(dòng)的元素的影響，視覺上有了間距柳恐。
沒解決：高度不能自適應(yīng)伐脖；margin不能生效
④內(nèi)墻法
在浮動(dòng)的元素最后面加一堵清除了浮動(dòng)的墻。
例：
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div class="cl"></div>
</div>
<div class="box2">
<p>5</p>
<p>6</p>
<p>7</p>
<div class="cl"></div>
</div>
div{
width:1000px;
/*height: 120px;*/
border: 5px solid #000;
margin-bottom: 10px;
}
div p{
width:100px;
height: 100px;
margin-right: 10px;
background-color: pink;
float: left;
}
/*.box2{
clear: both;
}*/
.cl{
clear: both;
border:none;
}
效果：
解決：高度自適應(yīng)乐设，對后面浮動(dòng)元素的影響讼庇，margin失效。
雖然解決了所有問題近尚，但是不使用這個(gè)方法蠕啄；因?yàn)轫撁嫔显黾恿撕芏酂o意義的標(biāo)簽div.cl。
⑤overflow:hidden
overflow：溢出處理方法戈锻。
屬性值：
auto：溢出滾動(dòng)
hidden：溢出隱藏
例：
<div class="box1">
<p>開頭我問問無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無無 無無無無無無無無嗚嗚無無無無無無無無無無無無</p>
</div>
div{
width:100px;
height: 120px;
border: 5px solid #000;
padding: 5px;
overflow: auto;
}
div p{
font-size: 12px;
line-height:20px;
}
效果：
overflow:auto; 溢出滾動(dòng)歼跟。當(dāng)文字內(nèi)容超過盒子的高度時(shí)，會(huì)出現(xiàn)滾動(dòng)條格遭，拉動(dòng)滾動(dòng)條可以查看全部文字哈街。
例：
div{
width:100px;
height: 120px;
border: 5px solid #000;
padding: 5px;
overflow: hidden;
}
div p{
font-size: 12px;
line-height:20px;
}
效果：
overflow:hidden; 溢出隱藏。當(dāng)文字內(nèi)容超過盒子的高度時(shí)拒迅，超過border的部分會(huì)被隱藏骚秦。（當(dāng)盒子有padding時(shí)，下padding不會(huì)隱藏文字璧微，超過border的部分才會(huì)被隱藏）
overflow：hidden可以解決浮動(dòng)的影響作箍。
例：
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box2">
<p>5</p>
<p>6</p>
<p>7</p>
</div>
div{
width:1000px;
border: 5px solid #000;
margin-bottom: 10px;
overflow: hidden;
}
div p{
width:100px;
height: 100px;
margin-right: 10px;
background-color: pink;
float: left;
}
效果：
解決：解決了所有的問題，同時(shí)沒有增加任何標(biāo)簽前硫。
overflow:hidden;有兩個(gè)引申含義：
①強(qiáng)制讓父盒子去檢測子盒子的高度胞得，將檢測的子盒子的高度自動(dòng)撐開自己的高度；（只要看到盒子高度自適應(yīng)屹电，只需要給父盒子加overflow:hidden;）
②強(qiáng)制檢測子盒子的浮動(dòng)阶剑，讓父盒子強(qiáng)制管理住自己的浮動(dòng)的子盒子跃巡，不讓子盒子影響別人同時(shí)也不讓別人影響自己。
