好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS学习笔记--CSS中定位的浮动float_html/css_WEB-ITnose

昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题:

1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么? 第一个问题:浮动到底是怎么样的?

W3CSCHOOL对浮动属性的解释: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以浮动也有left、right、none三种。

我个人的理解是: HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而这些水就代表的是页面中的各个元素,他们都是有顺序的进入水槽(文档流的顺序 和我们写字一样,从上到下从左到右)。当出现了一个具有浮动属性(float)的元素时,就好像是水流中多了一块泡沫,它会浮在水面上(也就是说明元素脱 离了文档流)。在水流停止后(页面加载完毕),这个元素会停靠在水槽的边缘或者停靠在别的泡沫边缘(浮动元素会处于包含框的边缘或者另一个浮动元素的边 缘)。

对于浮动元素是否脱离了文档流,这个我刚开始也很迷糊,因为在看教学视频的时候一个老师说没有,另一个老师说有。于是就自己敲了代码做了点实验:

             Title       #div1{        height: 100px;        background-color: #e13b00;        float: left;        clear: both;    }      

div1div1d

查看更多关于CSS学习笔记--CSS中定位的浮动float_html/css_WEB-ITnose的详细内容...

  阅读:32次