前端入门之css浮动

来源：互联网发布：淘宝造物节h5 源码编辑：程序博客网时间：2024/06/13 13:19

亲手做了一遍浮动的测试，总结归纳一下：

1.所有的元素默认都是左上角对齐的，就是说默认情况下寻找可以到达的最高点，直到遇到边缘。一旦给某个元素设置浮动，这个元素将脱离原来的文档流，就像字面意义一样，浮起来了，浮起来的元素在同一个面上，就是说除了大的容器边框以外，浮动元素的位置只和另外的浮动元素位置相关，老老实实在地面上的呢，也只和地面上的元素相关。

下面是测试代码，这是没有设置浮动的时候：

<style type="text/css">body{ width:400px; height:400px; border:1px solid black;}.a{ background-color:#F00; width:100px; height:100px; float:left;}.b{ background-color:#0F0; width:110px; height:110px;}.c{ background-color:#00F; width:120px; height:120px;}</style> <body><div class="a">a</div><div class="b">b</div><div class="c">c</div></body>

原本的图是这样：

2.设置a左浮动：

.a{ background-color:#F00; width:100px; height:100px; float:left;}

给第一块加了向左浮动之后，a突破文档流，向左移动直到碰到边框，这时候a已经不在文档流中，b和c就会往上走，a遮盖了b。在这会发现一个问题，虽然a遮盖了b，但是b中的内容（即字b）依然会识别已经不在文档流中的a，保持不越过a的边框。这是为什么呢？

3.当设置前两个都为左浮动时

a和b都突破文档流，盖住了c。

4.设置a float:left,b float:right之后，c依然是向左上方走，但是这时候c中的文字不在a的下面，而跑到a的右边来了。

5.当设置三个div都左浮动时，如果大的容器宽度足够，就会按顺序排列，但是当容器不够大，放不下的那个div则会换行继续寻找最左边的位置，紧贴着某个容器的边框。（此处将最外层容器body宽度设置为了300px）

6.类似的，为了更清楚的理解，再来一个a左浮动，b和c右浮动

7.清除浮动：

.a{ background-color:#F00; width:100px; height:100px;float:left;}

.b{ background-color:#0F0; width:110px; height:110px;clear:left;}

.c{ background-color:#00F; width:120px; height:120px;float:right;}

A左浮动，b清楚了左浮动，我的理解中，清除浮动即是将原本突破文本流的块看作文本流的一部分，就是说虽然浮动的元素还飘在空中，我就把它当作在地面，b清除左浮动，那么原本为左浮动的a将会视为一个存在的块，这下b的位置得依照a的位置来定了。这时候又设置了c右浮动，它会寻找可到达的最右边和最上边，因为b没有浮动，是在文本流中的块级元素，所以c不能和b并列，于是出现了下面这种情况，c已经撑破了body。

那么再考虑一种情况，如果a左浮动，b右浮动，c分别清除左浮动，右浮动和both，c的位置在哪呢？

Clear:left

Clear:right

Clear:both在此处和clear:right效果相同，因为b比a要大一些。关于清除只需要记住谁清除，谁就是文本流中的元素，清除什么浮动，就把那种浮动的元素看作了文本流的一部分。

先总结到这，还会继续补充。

0 0