float定位点分析

来源：互联网发布：worktile基础版 mac 编辑：程序博客网时间：2024/05/21 09:46

之前有个概念认为float就是完全在最上端单独显示，脱离了文档流，不考虑位置

但是实际上float依然受父元素的约束，只是显示在上不占文档流而已

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>my1</title><style>#container{width: 1008px;background: yellow;}#header{height: 120px;background: orange;}#main{height: 400px;background: green;margin-top: 20px;margin-left: 20px;margin-right: 20px;z-index: 20;}#lside{width: 300px;z-index: 0;height: 500px;background: pink;float: right;}#rside{width: 300px;height: 250px;background: purple;position: fixed;left: 200px;}#footer{height: 220px;background: blue;}</style></head><body><div id="container"><div id="header"><h1>This is main</h1><p>This is a main.</p></div><div id="main"><div id="lside"><script>document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");</script><input id="i1" type="text"><button id="b2" type="button" onclick="pdnum()">Submit</button></div><div id="rside">this is right side<button type="button" onclick="changeh1()">点击这里</button></div></div><div id="footer">  this is footer</div></div>         <script src="./js/t1.js" type="text/javascript"></script></body></html>

这个例子里面rside只能在main里面动

0 0