摘要: 浮动float是css中比较难理解的样式,作为html页面布局中重要的一环,还有一环是定位position(相对于float而言或许容易理解). 我之前也经常使用浮动进行定位,可就是不能随心所欲运用,也不能很好的解释由于float带来的问题. 最近综合学习有关float的 ...
摘要: 浮动float是css中比较难理解的样式,作为html页面布局中重要的一环,还有一环是定位position(相对于float而言或许容易理解). 我之前也经常使用浮动进行定位,可就是不能随心所欲运用,也不能很好的解释由于float带来的问题. 最近综合学习有关float的理论,写下此文进行总结.
注意:浮动问题出现的根本在于:使用float会脱离html文档流. 此文结合“Firfox"的3D效果进行分析.同时使用Edit-plus进行编码。
1 浮动float属性
(1) 有代码有真相:看下面基准代码
<!doctype html><html l ang="en">
<head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="andy"> <meta name="Keywords" content="float"> <meta name="Description" content="坚持"> <title>float测试</title> <style> body,html,div{padding:0pc;margin:0px;} .box1{width:100px;height:100px;border:2px solid red;} .box2{width:140px;height:80px; border:2px solid yellow;} </style> </head> <body> 分析:盒子1不浮动, 盒子2浮动,那么盒子2(橙色)不会上去,还是换行显示. 到了"1111"盒子不浮动,那么就自然是放在盒子2的下面空间处,1111字样被挤出来. 接下来是盒子3,因为前面的盒子"111"不浮动,那么只能换行接着显示(浅紫色). 接下来 盒子4,因为自己浮动而盒子3不浮动,所以自己换行浮动,仔细看图,盒子4(深紫色)左边是盒子2的边框(橙色), 盒子2也是float的,自然这行左边的位置被霸占,盒子4只能靠边. 这样看来就容易理解多了.
现在清除浮动:上面代码中在1111盒子的style出加上"clear:left";结果是这样的:
结果自己试着分析,不难理解;
注:"浮动的艺术下":解释了float会导致的一些问题和解决方法.
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:浮动的艺术
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。