解析 float : left
生活随笔
收集整理的這篇文章主要介紹了
解析 float : left
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本篇主要介紹float屬性：定義元素朝哪個(gè)方向浮動(dòng)。
HTML頁(yè)面的標(biāo)準(zhǔn)文檔流(默認(rèn)布局)是：從上到下，從左到右，遇塊(塊級(jí)元素)換行
浮動(dòng)層：給元素的float屬性賦值后，就是脫離文檔流，進(jìn)行左右浮動(dòng)，緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框。
而此浮動(dòng)元素在文檔流空出的位置，由后續(xù)的(非浮動(dòng))元素填充上去：塊級(jí)元素直接填充上去，若跟浮動(dòng)元素的范圍發(fā)生重疊，浮動(dòng)元素覆蓋塊級(jí)元素。內(nèi)聯(lián)元素：有空隙就插入。
?float 屬性介紹 ：① left ：元素向左浮動(dòng)。② right ：元素向右浮動(dòng)。③ none ：默認(rèn)值。④ inherit ：從父元素繼承float屬性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><title>2.3-float屬性</title><style type="text/css">#a{background-color:Red;height:50px;width:100px;}#b{background-color:Yellow; height:50px;width:200px;}#c{background-color:Blue; height:50px;width:300px;}#d{background-color:Gray;height:50px;width:400px;}</style> </head> <body> <div id=a >div-a</div> <div id=b>div-b</div> <div id=c>div-c</div> <input type="text" value="input1" /> <input type="text" value="input2" /> <input type="text" value="input3 " /> <div id=d>div-d</div> <input type="text" value="input4 " /> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/jiaohaitao/p/6727913.html
總結(jié)
以上是生活随笔為你收集整理的解析 float : left的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java之Io-File类
- 下一篇： 如何关闭联想台式机电脑USB键盘的FN功