浮動的詳解
實(shí)現(xiàn)水平布局：
inline-block：
- inline-bolck的優(yōu)勢：不需要清除浮動供屉，簡單，容易設(shè)置居中京景，適合子內(nèi)容不多的元素水平排列,可以用來兩欄布局（同一行內(nèi)有兩個div一個固定寬度茂装，一個自適應(yīng)）。
<div class="lch">
<span class="box">hello</span>
<span class="box">hello</span>
</div>
<style>
body{
text-align: center;
}
.lch{
font-size: 0;
}
.box{
border: 1px solid red;
width: 100px;
display: inline-bolck;
font-size: 20px;
}
</style>
<!--inline-bolck--!>
- inline-bolck的劣勢：使用inline-bolck要注意縫隙問題和頂部對齊問題（vertical-align:top;）以及IE8以下不能使用.
<div class="lch1">固定寬度</div>
<div class="lch2">固定寬度</div>
<div class="li">自適應(yīng)寬度自適應(yīng)寬度自適應(yīng)寬度自適應(yīng)寬度（沒效果的多寫幾個）</div>
<style>
.lch1{
width: 150px;
height: 800px;
background: red;
float: right;
}
.li{
height: 800px;
background: blue;
margin-right: 160px;
margin-left: 160px;
font-size: 30px;
}
.lch2{
width: 150px;
height: 800px;
background: red;
float: left;
}
</style>
<!--兩欄布局--!>
- 注：在書寫HTML時瘾晃，需先寫兩個固定寬度的兩欄再寫自適應(yīng)寬度的一欄，因為浮動并不脫離普通文檔流幻妓，所以要先行渲染蹦误，否則無法達(dá)到預(yù)期效果，三者無法在一行出現(xiàn)肉津。
浮動：
- 浮動的優(yōu)勢：兼容性好强胰，沒有縫隙問題，適合使用兩欄布局妹沙。
- 浮動的劣勢：需要清除浮動偶洋，塊級元素使用浮動會使寬度收縮，所以使用浮動要注意撐開父元素距糖，避免其帶來的許多后續(xù)問題玄窝；
- 行內(nèi)元素設(shè)置浮動可以設(shè)置寬高等類似inline-block的效果。
- 浮動適合稍大的布局;
- 浮動元素不是完全脫離文檔流肾筐，塊盒看不見哆料，但是文本生成的行盒可以（具體例子，比如圍繞浮動圖片的p標(biāo)簽文本）吗铐。
清除浮動：
- clear：left东亦；使用場景是為了清除浮動元素給后續(xù)其他元素帶來的影響，如若它的左邊有浮動元素唬渗，他的上邊緊貼它在html中之前的最后一個左浮動元素的下邊（指整個行盒典阵，不只是展示出來的寬高）。
- clear：right镊逝；使用場景是為了清除浮動帶來的影響后續(xù)元素壮啊，如若它的右邊有浮動元素，它的上邊緊貼它在html中之前的最后一個右浮動元素的下邊指整個行盒撑蒜，不只是展示出來的寬高）歹啼。
- clear：both玄渗；同事時擁有clear：left；與clear：right的效果狸眼，只要該元素前出現(xiàn)浮動藤树，便使它的上邊緊貼它在html中之前的最后一個浮動元素的下邊（指整個行盒，不只是展示出來的寬高）拓萌。
<div class="box box1">1</div>
<div class="box box2">2</div>
<style>
.box{
border: 1px solid;
height:50px;
width: 50px;
}
.box1{
float: right;
}
.box2{
float: right;
clear: right;
}
</style>
<!--利用浮動與清除浮動實(shí)現(xiàn)兩盒右并列--!>
.clearfix{
*zoom=1;
}
浮動和負(fù)邊距：
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
