实战网页布局心得（一）
實(shí)戰(zhàn)心得：
1.父元素不能撐起浮動(dòng)子元素帶來的影響
在沒有實(shí)戰(zhàn)之前，經(jīng)常會(huì)看到書里講到浮動(dòng)元素帶來的影響，其中之一就是父元素不能撐起子元素，書里經(jīng)常會(huì)舉這個(gè)例子
然后書上就會(huì)介紹如何清除浮動(dòng)來讓父元素?fù)纹鹱釉亓?#xff0c;但是當(dāng)不設(shè)置父元素的高度時(shí)，頁面就只會(huì)顯示這兩個(gè)子元素，看起來好像達(dá)到了我們想要的效果，
那為什么還要清除浮動(dòng)呢？？父元素沒有包裹子元素其實(shí)還是會(huì)有影響的，會(huì)對(duì)父元素的兄弟元素的布局會(huì)有影響。看個(gè)例子
<!doctype html> <html><head><title></title></head><meta charset='utf-8'><style>#wrapper{width: 400px;}#test_float1{width:50px;height: 50px;float: left;background-color: blue;}#test_float2{width: 50px;height: 50px;float: right;background-color: red;}#special{width:400px;height:200px;background-color: yellow;}</style><body><div id='wrapper'><div id='test_float1'>子元素1</div><div id='test_float2'>子元素2</div></div><div id='special'>這個(gè)元素不會(huì)按照正常布局位于wrapper元素的下面，而是會(huì)和wrapper的子元素重疊在一起</div></body> </html>顯示結(jié)果：
我們預(yù)期的結(jié)果是黃色區(qū)域位于wrapper的下面，可是顯然黃色區(qū)域與wrapper重疊了。
所以我們給wrapper一個(gè)高度讓它能夠包裹起來子元素（這只是一種清理浮動(dòng)的方法）
#wrapper{height:100px; }然后就會(huì)達(dá)到預(yù)期效果了
2.float元素的寬度和高度
當(dāng)一個(gè)元素設(shè)置為float時(shí)，只要其值不為none，它就變成了block元素，即塊級(jí)方框，但是它和塊級(jí)元素略有區(qū)別。
一般塊級(jí)方框默認(rèn)的width為一整行，而float元素的尺寸與內(nèi)容的大小相同，內(nèi)容的寬度即為float元素的寬度，內(nèi)容的高度即為float元素的高度，看一個(gè)例子：
<style> span{display: block;background-color: yellow;}</style> <body ><span>文字</span></body>它的效果圖是：
然后看一下float的：
<style> ul{height:50px;list-style: none;background-color: blue;}li{float: left;padding:5px 10px;margin-left: 10px;background-color: yellow;}</style><body ><ul><li>首頁</li><li>第一</li><li>第二</li><li>第三</li></ul></body>
總結(jié)
以上是生活随笔為你收集整理的实战网页布局心得（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js碎片知识的学习与补充(parsein
- 下一篇： printf与sprintf