说一说网页设计中的浮动模型
HTML页面的标准文档流,其默认布局是:从上到下,从左到右,遇块(状元素)换行;
若在文档中加入float层,那么这一层会脱离文档流,进行左右浮动。可以这样不专业的认为,在看HTML文档时,先不看float层(当然在出现清浮动代码时不能这样看),等到全部文档看完后,在看 float层。
现在来介绍一下float属性:
1.left:向左浮动
2.right:向右浮动
3.none:默认值
4.inherit:从父元素继承float属性
注:1.靠近浏览器页面边缘的一边为前,远离页面边缘的一边为后
如:float:left 则按顺序从左向右水平排列(视屏幕大小所定,当屏幕较小时,浮动层会被迫转行);
float:right则按顺序从右向左水平排序;
2.前面说过看HTML文档先不看float层,但是要纠正一点
如:定义 div1,div2,div3,其中div2定义为float:left,最后的结果是 div3的内容被覆盖
所以在看文档内容时,要注意依旧按照顺序排列,但文档流和float层是平行的关系;
最后一句:小哈个人认为文档流是竖向排列,而浮动之后可以变为横向排列
下面我们来看看清除浮动吧
清除浮动的关键字是:clear,其属性为:
1.left:不允许左边有浮动;
2.right:不允许右边有浮动;
3.none:默许两边都可以有浮动;
4.both:不允许两边有浮动;
注:clear属性只能影响清除元素本身,不会影响其他元素
如:div1,div2按顺序横向排列,这时需要使div2和div1强制分行,即强迫div2转入下一行,这时应该将clear:left写入div2中;
小哈觉得这是清除浮动最重要的原理,其他就没什么了;
最后祝大家学习快乐!