CSS 绝对定位 ,浮动,清除浮动

首先:

我们需要知道div元素(块级元素)独占一行






box1
box2

如下图所示,box1和box2独占一行,可见如果每个div都独占一行,我们根本无法进行布局,所以我们就需要绝对定位和浮动来帮助我们布局!

CSS 绝对定位 ,浮动,清除浮动_第1张图片
Paste_Image.png

绝对定位的参照关系

绝对定位会以最近的设置了position属性的父级为参照物进行定位,如下图box2就以id为1 的div为父级参照进行定位






box1
box2
CSS 绝对定位 ,浮动,清除浮动_第2张图片
Paste_Image.png

浮动

无论多么复杂的布局,其基本出发点均是:如何在一行显示多个div元素。显然标准流已经无法满足需求,这就要用到浮动。
浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。

正常的div布局应该是像下图一样的

CSS 绝对定位 ,浮动,清除浮动_第3张图片
Paste_Image.png

box1
box2
box3
box4

假如我们将box2设置浮动 style中加上属性 float:left 向左浮动我们可以发现如下图的样子

CSS 绝对定位 ,浮动,清除浮动_第4张图片
Paste_Image.png

其中box2漂浮在了box3上面,从而覆盖了一部分的box3,从而我们可以知道浮动的元素是脱离了标准流的!

之后我们将box3也设置为向左浮动,可以发现box3和box2并排了,并排在box2之后,而且box2和box3都漂浮在box4之上

CSS 绝对定位 ,浮动,清除浮动_第5张图片
Paste_Image.png
box1
box2
box3
box4

clear 清除浮动

清除浮动的关键字
clear : none | left | right | both
什么时候需要清除浮动呢?

以上面的例子 ,如果我们希望box4不被这些漂浮的元素所覆盖,需要怎么做呢?
这时候就需要清除浮动了 clear了
只需要在box4 添加CSS属性 clear:left ,就可以清除其左边的浮动元素影响,不被他们所覆盖

CSS 绝对定位 ,浮动,清除浮动_第6张图片
加了clear之后的.png
box1
box2
box3
box4

还有当我们浮动的元素不希望跟在其他浮动元素之后时,也可以使用clear 属性来另起一行

box1
box2
box3
CSS 绝对定位 ,浮动,清除浮动_第7张图片
Paste_Image.png

博客原文地址戳这里

你可能感兴趣的:(CSS 绝对定位 ,浮动,清除浮动)