网页设计里的浮动 属性

 

说一说网页设计中的浮动模型

 

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中；

 

小哈觉得这是清除浮动最重要的原理，其他就没什么了；

最后祝大家学习快乐！